<!DOCTYPE HTML>
<html lang="zh-hans">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>HTML5+CSS3 · 码路大前端小册-企业面试真题</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.3">
    <meta name="author" content="码路">



    <link rel="stylesheet" href="../gitbook/style.css">




    <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-insert-logo/plugin.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">



    <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">















    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152"
        href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="../javascript/" />


    <link rel="prev" href="../" />



    <link rel="shortcut icon" href='../source/images/favicon.jpg' type="image/x-icon">


    <link rel="bookmark" href='../source/images/favicon.jpg' type="image/x-icon">


    <link rel="apple-touch-icon" href='../source/images/apple-touch-icon.jpg'>



    <link rel="apple-touch-icon" sizes="120x120" href="../source/images/apple-touch-icon.jpg">

    <link rel="apple-touch-icon" sizes="180x180" href="../source/images/apple-touch-icon.jpg">



    <style>
        @media only screen and (max-width: 640px) {
            .book-header .hidden-mobile {
                display: none;
            }
        }
    </style>
    <script>
        window["gitbook-plugin-github-buttons"] = { "buttons": [{ "user": "lurongtao", "repo": "felixbooks-interview", "type": "star", "size": "small", "count": true }] };
    </script>

</head>

<body>

    <div class="book">
        <div class="book-summary">


            <div id="book-search-input" role="search">
                <input type="text" placeholder="输入并搜索" />
            </div>


            <nav role="navigation">



                <ul class="summary">









                    <li class="chapter " data-level="1.1" data-path="../">

                        <a href="../">


                            前言

                        </a>



                    </li>

                    <li class="chapter active" data-level="1.2" data-path="./">

                        <a href="./">


                            HTML5+CSS3

                        </a>



                    </li>

                    <li class="chapter " data-level="1.3" data-path="../javascript/">

                        <a href="../javascript/">


                            JavaScript

                        </a>



                    </li>

                    <li class="chapter " data-level="1.4" data-path="../node/">

                        <a href="../node/">


                            Node.js

                        </a>



                    </li>

                    <li class="chapter " data-level="1.5" data-path="../vue/">

                        <a href="../vue/">


                            Vue.js

                        </a>



                    </li>

                    <li class="chapter " data-level="1.6" data-path="../react/">

                        <a href="../react/">


                            React

                        </a>



                    </li>

                    <li class="chapter " data-level="1.7" data-path="../weapp/">

                        <a href="../weapp/">


                            小程序

                        </a>



                    </li>

                    <li class="chapter " data-level="1.8" data-path="../browser/">

                        <a href="../browser/">


                            浏览器

                        </a>



                    </li>

                    <li class="chapter " data-level="1.9" data-path="../network/">

                        <a href="../network/">


                            网络

                        </a>



                    </li>

                    <li class="chapter " data-level="1.10" data-path="../engineering/">

                        <a href="../engineering/">


                            前端工程化

                        </a>



                    </li>

                    <li class="chapter " data-level="1.11" data-path="../performance/">

                        <a href="../performance/">


                            性能

                        </a>



                    </li>

                    <li class="chapter " data-level="1.12" data-path="../security/">

                        <a href="../security/">


                            安全

                        </a>



                    </li>

                    <li class="chapter " data-level="1.13" data-path="../handwritten/">

                        <a href="../handwritten/">


                            手写代码

                        </a>



                    </li>

                    <li class="chapter " data-level="1.14" data-path="../algorithm/">

                        <a href="../algorithm/">


                            高频算法

                        </a>



                    </li>

                    <li class="chapter " data-level="1.15" data-path="../others/">

                        <a href="../others/">


                            综合

                        </a>



                    </li>




                    <li class="divider"></li>



                    <li class="chapter " data-level="2.1" data-path="../thanks/">

                        <a href="../thanks/">


                            感谢

                        </a>



                    </li>




                    <li class="divider"></li>

                    <li>
                        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                            本书使用 GitBook 发布
                        </a>
                    </li>
                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">



                <div class="book-header" role="navigation">


                    <!-- Title -->
                    <h1>
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                        <a href="..">HTML5+CSS3</a>
                    </h1>
                </div>




                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h5
                                        id="1-&#x2605;-&#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;">
                                        <a name="1-&#x2605;-&#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#1-&#x2605;-&#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="1-&#x2605;-&#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;"
                                            class="plugin-anchor"
                                            href="#1-&#x2605;-&#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>1. &#x2605;
                                        &#x7236;&#x5143;&#x7D20;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x5BBD;&#x9AD8;&#x4E0D;&#x56FA;&#x5B9A;&#xFF0C;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5782;&#x76F4;&#x5C45;&#x4E2D;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">-</span> &#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;
  <span class="hljs-selector-tag">-</span>&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:flex</span>; <span class="hljs-selector-tag">justify-content</span><span class="hljs-selector-pseudo">:center</span>; <span class="hljs-selector-tag">align-items</span><span class="hljs-selector-pseudo">:center</span>
  <span class="hljs-selector-tag">-</span>&#x989D;&#x5916;&#x7684;&#x9A9A;&#x64CD;&#x4F5C;&#xFF1A;&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5F39;&#x6027;&#x76D2;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:flex</span>; &#x5B50;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">margin</span>: <span class="hljs-selector-tag">auto</span>; &#x5B9E;&#x73B0;&#x5782;&#x76F4;&#x6C34;&#x5E73;&#x5C45;&#x4E2D;
<span class="hljs-selector-tag">-</span> &#x5B9A;&#x4F4D;&#x5C5E;&#x6027;&#xFF08;<span class="hljs-selector-tag">position</span>&#xFF09;&#x914D;&#x5408;&#x4F4D;&#x79FB;&#x5C5E;&#x6027;&#xFF08;<span class="hljs-selector-tag">transform</span>&#xFF09;
  <span class="hljs-selector-tag">-</span> &#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A;<span class="hljs-selector-tag">position</span><span class="hljs-selector-pseudo">:relative</span>&#xFF0C;
  <span class="hljs-selector-tag">-</span> &#x5B50;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A;<span class="hljs-selector-tag">position</span><span class="hljs-selector-pseudo">:absolute</span>; <span class="hljs-selector-tag">top</span><span class="hljs-selector-pseudo">:50</span>%; <span class="hljs-selector-tag">left</span><span class="hljs-selector-pseudo">:50</span>%; <span class="hljs-selector-tag">transform</span><span class="hljs-selector-pseudo">:translate(-50</span>%&#xFF0C;<span class="hljs-selector-tag">-50</span>%)
</code></pre>
                                    <h5
                                        id="2-&#x2605;&#x2605;-&#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&#x4E00;&#x70B9;-&#x548C;-&#x4E09;&#x70B9;-&#x7684;&#x5E03;&#x5C40;&#x3002;">
                                        <a name="2-&#x2605;&#x2605;-&#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&#x4E00;&#x70B9;-&#x548C;-&#x4E09;&#x70B9;-&#x7684;&#x5E03;&#x5C40;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#2-&#x2605;&#x2605;-&#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&#x4E00;&#x70B9;-&#x548C;-&#x4E09;&#x70B9;-&#x7684;&#x5E03;&#x5C40;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="2-&#x2605;&#x2605;-&#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&#x4E00;&#x70B9;-&#x548C;-&#x4E09;&#x70B9;-&#x7684;&#x5E03;&#x5C40;&#x3002;"
                                            class="plugin-anchor"
                                            href="#2-&#x2605;&#x2605;-&#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&#x4E00;&#x70B9;-&#x548C;-&#x4E09;&#x70B9;-&#x7684;&#x5E03;&#x5C40;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>2. &#x2605;&#x2605;
                                        &#x5206;&#x522B;&#x5B9E;&#x73B0;&#x9AB0;&#x5B50;&#x4E2D;&#x7684;&apos;&#x4E00;&#x70B9;&apos;
                                        &#x548C; &apos;&#x4E09;&#x70B9;&apos; &#x7684;&#x5E03;&#x5C40;&#x3002;
                                    </h5>
                                    <p>&#x94FE;&#x63A5;&#xFF1A;</p>
                                    <pre><code class="lang-css">/*&#x4E00;&#x70B9;&#x5E03;&#x5C40;&#xFF1A;&#x539F;&#x7406;&#x5C31;&#x662F;&#x5C06;&#x5355;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x5782;&#x76F4;&#x6C34;&#x5E73;&#x5C45;&#x4E2D;&#xFF0C;&#x5229;&#x7528;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;(display:flex)&#x5373;&#x53EF;*/
&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A;display:flex; justify-content:center; align-items: center

/*&#x4E09;&#x70B9;&#x5E03;&#x5C40;&#xFF1A;&#x540C;&#x6837;&#x662F;&#x4F7F;&#x7528;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;(display:flex)&#xFF0C;&#x53EA;&#x4E0D;&#x8FC7;&#x8FD9;&#x6B21;&#x9700;&#x8981;&#x7528;&#x5230;&#x5176;&#x4ED6;&#x5C5E;&#x6027;*/

&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A;display: flex; justify-content: space-between;
&#x5B50;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#xFF1A; .child:nth-child(2){
              align-self: center;
            }
            .child:nth-child(3){
              align-self: flex-end;
            }

&#x4E09;&#x70B9;&#x5E03;&#x5C40;&#x9700;&#x8981;&#x4E09;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#xFF0C;&#x5728;&#x8FD9;&#x91CC;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x4E0D;&#x9700;&#x8981;&#x8BBE;&#x7F6E;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A; align-self: flex-start 
justify-content: space-between; &#x7684;&#x4F5C;&#x7528;&#x662F;&#x4F7F;&#x5B50;&#x5143;&#x7D20;&#x80FD;&#x591F;&#x5728;&#x6C34;&#x5E73;&#x65B9;&#x5411;&#x4E0A;&#x4E24;&#x8FB9;&#x4EA7;&#x751F;&#x95F4;&#x9694;&#x5E76;&#x5E73;&#x5747;&#x5206;&#x5E03;&#x7A7A;&#x95F4;
align-self: flex-start(&#x9ED8;&#x8BA4;)/center/flex-end; &#x8BE5;&#x5C5E;&#x6027;&#x4F5C;&#x7528;&#x5728;&#x7236;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E86;display:flex&#x7684;&#x5B50;&#x5143;&#x7D20;&#x4E0A;&#xFF0C;&#x53EF;&#x4EE5;&#x8C03;&#x6574;&#x5B50;&#x5143;&#x7D20;&#x81EA;&#x8EAB;&#x7684;&#x4F4D;&#x7F6E;
</code></pre>
                                    <h5
                                        id="3-&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;&#x548C;&#x7684;&#x533A;&#x522B;&#x3002;">
                                        <a name="3-&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;&#x548C;&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#3-&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;&#x548C;&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="3-&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;&#x548C;&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="plugin-anchor"
                                            href="#3-&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;&#x548C;&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>3. &#x2605;&#x2605;
                                        &#x7B80;&#x8FF0;&#x9009;&#x62E9;&#x5668;~&#x548C;+&#x7684;&#x533A;&#x522B;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">~ &#x9009;&#x62E9;&#x5668;&#x7684;&#x4F5C;&#x7528;&#xFF1A;
    1.&#x9009;&#x62E9;&#x7D27;&#x8DDF;&#x7740;&#x5F53;&#x524D;&#x7B26;&#x5408;&#x6761;&#x4EF6;&#x5143;&#x7D20;&#x540E;&#x9762;&#x7684;&#x540C;&#x7EA7;&#x5143;&#x7D20;
    2.&#x53EF;&#x4EE5;&#x5339;&#x914D;&#x591A;&#x4E2A;
+ &#x9009;&#x62E9;&#x5668;&#x7684;&#x4F5C;&#x7528;&#xFF1A;
    1.&#x9009;&#x62E9;&#x7D27;&#x8DDF;&#x5728;&#x5F53;&#x524D;&#x7B26;&#x5408;&#x6761;&#x4EF6;&#x5143;&#x7D20;&#x540E;&#x9762;&#x7684;&#x540C;&#x7EA7;&#x5143;&#x7D20;
    2.&#x53EA;&#x80FD;&#x5339;&#x914D;&#x4E00;&#x4E2A;

&#x4F8B;&#xFF1A; &lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
    &lt;p class=&quot;one&quot;&gt;&lt;/p&gt;
    &lt;span class=&quot;two&quot;&gt;&lt;/span&gt;
    &lt;p class=&quot;three&quot;&gt;&lt;/p&gt;
    &lt;span class=&quot;four&quot;&gt;&lt;/span&gt;

    .box ~ p  &#xFF1A;&#x53EF;&#x4EE5;&#x9009;&#x4E2D;box&#x4E0B;&#x7684;&#x6240;&#x6709;p&#x5143;&#x7D20;&#xFF0C;&#x65E2;&#x662F; one &#x548C; three
    .box + span &#xFF1A;&#x5219;&#x5339;&#x914D;&#x9009;&#x4E2D;box&#x76F8;&#x90BB;&#x4E0B;&#x7B26;&#x5408;&#x6761;&#x4EF6;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x65E2;&#x662F; two
</code></pre>
                                    <h5
                                        id="4-&#x2605;&#x2605;-&#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;">
                                        <a name="4-&#x2605;&#x2605;-&#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#4-&#x2605;&#x2605;-&#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="4-&#x2605;&#x2605;-&#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;"
                                            class="plugin-anchor"
                                            href="#4-&#x2605;&#x2605;-&#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>4. &#x2605;&#x2605;
                                        &#x7B80;&#x8FF0;box-sizing&#x7684;&#x6709;&#x6548;&#x503C;&#x4EE5;&#x53CA;&#x6240;&#x5BF9;&#x5E94;&#x7684;&#x76D2;&#x6A21;&#x578B;&#x89C4;&#x5219;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">/*box-sizing&#x503C;*/
    box-sizing: content-box/border-box/inherit
 box-sizing&#x5C5E;&#x6027;&#x7528;&#x4E8E;&#x66F4;&#x6539;&#x7528;&#x4E8E;&#x8BA1;&#x7B97;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x9ED8;&#x8BA4;&#x7684;CSS&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6B64;&#x5C5E;&#x6027;&#x6765;&#x6A21;&#x62DF;&#x4E0D;&#x6B63;&#x786E;&#x652F;&#x6301;CSS&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x89C4;&#x8303;&#x7684;&#x6E38;&#x89C8;&#x5668;&#x884C;&#x4E3A;&#x3002;
**content-box&#xFF1A;
    1.box-sizing&#x7684;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;
    2.&#x662F;CSS2.1&#x4E2D;&#x89C4;&#x5B9A;&#x7684;&#x5BBD;&#x5EA6;&#x9AD8;&#x5EA6;&#x7684;&#x663E;&#x793A;&#x884C;&#x4E3A;
    3.&#x5728;CSS&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x5C31;&#x5BF9;&#x5E94;&#x5230;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x6846;&#xFF08;&#x5373;&#x5143;&#x7D20;&#x5BB9;&#x5668;&#x672C;&#x8EAB;
    4.&#x5728;CSS&#x4E2D;&#x5B9A;&#x4E49;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x4E4B;&#x5916;&#x7ED8;&#x5236;&#x5143;&#x7D20;&#x7684;&#x5185;&#x8FB9;&#x8DDD;&#x548C;&#x8FB9;&#x6846;&#xFF08;&#x5373;&#x5728;&#x5143;&#x7D20;&#x5BB9;&#x5668;&#x672C;&#x8EAB;&#x4E0A;&#x589E;&#x52A0;&#x5185;&#x8FB9;&#x8DDD;&#x548C;&#x8FB9;&#x6846;&#xFF0C;&#x5BB9;&#x5668;&#x5BBD;&#x9AD8;&#x9700;&#x8981;&#x81EA;&#x589E;&#x8BA1;&#x7B97;
    &#x5BB9;&#x5668;&#x5360;&#x636E;&#x7A7A;&#x95F4;&#x5927;&#x5C0F;&#x8BA1;&#x7B97;&#x65B9;&#x5F0F;&#xFF1A;content&#xFF08;&#x5BB9;&#x5668;&#x5BBD;&#x9AD8;&#xFF09;+ margin&#xFF08;&#x5916;&#x8FB9;&#x8DDD;&#xFF09; + border&#xFF08;&#x8FB9;&#x6846;&#xFF09;
**border-box:
    1.&#x5728;CSS&#x4E2D;&#x5FAE;&#x5143;&#x7D20;&#x8BBE;&#x5B9A;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x5C31;&#x51B3;&#x5B9A;&#x4E86;&#x5143;&#x7D20;&#x7684;&#x8FB9;&#x6846;&#x503C;
    2.&#x5143;&#x7D20;&#x5728;&#x8BBE;&#x7F6E;&#x5185;&#x8FB9;&#x8DDD;&#x548C;&#x8FB9;&#x6846;&#x662F;&#x5728;&#x5DF2;&#x7ECF;&#x8BBE;&#x5B9A;&#x597D;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x4E4B;&#x5185;&#x8FDB;&#x884C;&#x7ED8;&#x5236;
    3.CSS&#x4E2D;&#x8BBE;&#x5B9A;&#x7684;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x51CF;&#x53BB;&#x8FB9;&#x6846;&#x548C;&#x5185;&#x95F4;&#x8DDD;&#x624D;&#x80FD;&#x5F97;&#x5230;&#x5143;&#x7D20;&#x5185;&#x5BB9;&#x6240;&#x5360;&#x7684;&#x5B9E;&#x9645;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;
    &#x5BB9;&#x5668;&#x5360;&#x636E;&#x7A7A;&#x95F4;&#x5927;&#x5C0F;&#x8BA1;&#x7B97;&#x65B9;&#x5F0F;&#xFF1A;content&#xFF08;&#x5BB9;&#x5668;&#x5BBD;&#x9AD8;&#xFF09;+padding&#xFF08;&#x5185;&#x8FB9;&#x8DDD;&#xFF09;+border&#xFF08;&#x8FB9;&#x6846;&#xFF09;
**inherit&#xFF1A;
    1.&#x89C4;&#x5B9A;&#x5143;&#x7D20;&#x662F;&#x4ECE;&#x7236;&#x5BB9;&#x5668;&#x7EE7;&#x627F;box-sizing&#x7684;&#x5C5E;&#x6027;&#x503C;
</code></pre>
                                    <h5
                                        id="5-&#x2605;&#x2605;&#x2605;-html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;">
                                        <a name="5-&#x2605;&#x2605;&#x2605;-html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#5-&#x2605;&#x2605;&#x2605;-html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="5-&#x2605;&#x2605;&#x2605;-html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#5-&#x2605;&#x2605;&#x2605;-html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>5.
                                        &#x2605;&#x2605;&#x2605;
                                        html&#x4E2D;&#x5143;&#x7D20;&#x7684;margin&#x662F;&#x5426;&#x4F1A;&#x53E0;&#x52A0;&#xFF08;&#x5408;&#x5E76;&#xFF09;&#xFF1F;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-comment">/*  &#x4F1A;&#x53E0;&#x52A0;   */</span>
&#x95EE;&#x9898;&#x8BE6;&#x89E3;1&#xFF1A; <span class="hljs-selector-tag">flex</span>&#x5E03;&#x5C40;&#x5BF9;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x5F71;&#x54CD;
    1.&#x5B50;&#x5143;&#x7D20;&#x7684;<span class="hljs-selector-tag">float</span>&#x3001;<span class="hljs-selector-tag">clear</span>&#x548C;<span class="hljs-selector-tag">vertical-align</span>&#x5C5E;&#x6027;&#x5C06;&#x4F1A;&#x5931;&#x6548;
    2.&#x89E3;&#x51B3;&#x4E86;<span class="hljs-selector-tag">margin</span>&#x4F20;&#x9012;&#x3001;&#x91CD;&#x53E0;&#xFF08;&#x53E0;&#x52A0;&#xFF09;&#x95EE;&#x9898;

&#x95EE;&#x9898;&#x8BE6;&#x89E3;2&#xFF1A;<span class="hljs-selector-tag">flex</span>&#x5E03;&#x5C40;&#x7684;<span class="hljs-selector-tag">margin</span>&#x4F20;&#x9012;&#x53E0;&#x52A0;&#x95EE;&#x9898;&#x4E3B;&#x8981;&#x6709;&#x4EE5;&#x4E0B;&#x4E24;&#x79CD;
    1.&#x7236;&#x5B50;&#x95F4;&#x7684;<span class="hljs-selector-tag">margin</span>&#xFF0C;&#x4F1A;&#x7531;&#x5B50;&#x7EA7;&#x4F20;&#x9012;&#x5230;&#x7236;&#x7EA7;
    &#x2014;&#x2014; &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A; <span class="hljs-selector-tag">margin</span>&#x4F20;&#x9012;&#x7684;&#x4EA7;&#x751F;&#x7684;&#x539F;&#x56E0;&#x662F;&#x7236;&#x7EA7;&#x7684;&#x9AD8;&#x5EA6;&#x6CA1;&#x6709;&#x88AB;&#x81EA;&#x52A8;&#x6491;&#x5F00;&#xFF0C;&#x6240;&#x4EE5;&#x5728;&#x7236;&#x7EA7;&#x7236;&#x7EA7;&#x589E;&#x52A0;&#x5C5E;&#x6027;&#xFF1A;<span class="hljs-selector-tag">overflow</span>: <span class="hljs-selector-tag">auto</span> &#x5373;&#x53EF;&#x89E3;&#x51B3;
    2.&#x5144;&#x5F1F;&#x95F4;&#x7684;<span class="hljs-selector-tag">margin</span>&#x503C;&#x4F1A;&#x91CD;&#x590D;&#x53E0;&#x52A0;
    &#x2014;&#x2014; &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A; &#x6D4F;&#x89C8;&#x5668;&#x4E3A;&#x4E86;&#x4FDD;&#x8BC1;&#x5217;&#x8868;&#x7684;&#x6574;&#x9F50;&#xFF0C;&#x4E0A;&#x4E0B;<span class="hljs-selector-tag">margin</span>&#x4EA7;&#x751F;&#x4E86;&#x53E0;&#x52A0;&#xFF0C;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x89E3;&#x51B3;&#x3002;&#x53EA;&#x80FD;&#x901A;&#x8FC7;&#x51CF;&#x5C11;&#x4E00;&#x4E2A;<span class="hljs-selector-tag">margin</span>&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x5982;&#x53EA;&#x5B9A;&#x4E49;<span class="hljs-selector-tag">margin-top</span><span class="hljs-selector-pseudo">:100px</span>;  <span class="hljs-selector-tag">margin-bottom</span><span class="hljs-selector-pseudo">:0px</span>&#x3002;&#x7684;&#x65B9;&#x5F0F;&#x89E3;&#x51B3;&#x3002;
</code></pre>
                                    <h5
                                        id="6-&#x2605;&#x2605;-&#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;">
                                        <a name="6-&#x2605;&#x2605;-&#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#6-&#x2605;&#x2605;-&#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="6-&#x2605;&#x2605;-&#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="plugin-anchor"
                                            href="#6-&#x2605;&#x2605;-&#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>6. &#x2605;&#x2605;
                                        &#x7B80;&#x8FF0;align-items&#x548C;align-content&#x7684;&#x533A;&#x522B;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">align-items</span>&#xFF1A;&#x53EF;&#x4EE5;&#x5E94;&#x7528;&#x4E8E;&#x6240;&#x6709;&#x7684;<span class="hljs-selector-tag">flex</span>&#x5BB9;&#x5668;&#xFF0C;&#x5B83;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">flex</span>&#x5B50;&#x9879;&#x5728;&#x6BCF;&#x4E2A;<span class="hljs-selector-tag">flex</span>&#x884C;&#x7684;&#x4EA4;&#x53C9;&#x8F74;&#x4E0A;&#x7684;&#x9ED8;&#x8BA4;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#xFF08;&#x76F8;&#x5BF9;<span class="hljs-selector-tag">Y</span>&#x8F74;

<span class="hljs-selector-tag">align-content</span>&#xFF1A;&#x53EA;&#x9002;&#x7528;&#x4E8E;&#x591A;&#x884C;&#x7684;<span class="hljs-selector-tag">flex</span>&#x5BB9;&#x5668;&#xFF0C;&#x5728;&#x4F7F;&#x7528;&#x524D;&#x9700;&#x5728;<span class="hljs-selector-tag">flex</span>&#x5BB9;&#x5668;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">flex-wrap</span>&#xFF1A;<span class="hljs-selector-tag">wrap</span>;&#x8868;&#x793A;&#x5B50;&#x5143;&#x7D20;&#x8D85;&#x51FA;&#x6362;&#x884C;&#xFF1B;<span class="hljs-selector-tag">align-content</span> &#x5B83;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5F53;<span class="hljs-selector-tag">flex</span>&#x5BB9;&#x5668;&#x5728;&#x4EA4;&#x53C9;&#x8F74;&#x4E0A;&#x6709;&#x591A;&#x4F59;&#x7684;&#x7A7A;&#x95F4;&#x65F6;&#xFF0C;&#x5C06;&#x5B50;&#x9879;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x6574;&#x4F53;&#x8FDB;&#x884C;&#x5BF9;&#x9F50;&#x3002;
</code></pre>
                                    <h5
                                        id="7-&#x2605;&#x2605;-&#x7B80;&#x8FF0;data-&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;">
                                        <a name="7-&#x2605;&#x2605;-&#x7B80;&#x8FF0;data-&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#7-&#x2605;&#x2605;-&#x7B80;&#x8FF0;data-&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="7-&#x2605;&#x2605;-&#x7B80;&#x8FF0;data-&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#7-&#x2605;&#x2605;-&#x7B80;&#x8FF0;data-&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>7. &#x2605;&#x2605;
                                        &#x7B80;&#x8FF0;data-*&#x5C5E;&#x6027;&#x7684;&#x7528;&#x6CD5;&#xFF08;&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#xFF0C;&#x5982;&#x4F55;&#x83B7;&#x53D6;&#xFF09;&#xFF0C;&#x6709;&#x4F55;&#x4F18;&#x52BF;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">data-*&#x5B9A;&#x4E49;&#xFF1A;
    1.&#x662F;&#x7528;&#x4E8E;&#x50A8;&#x5B58;&#x9875;&#x9762;&#x6216;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;&#x79C1;&#x6709;&#x81EA;&#x5B9A;&#x4E49;&#x6570;&#x636E;
    2.&#x8D4B;&#x4E88;&#x6211;&#x4EEC;&#x5728;&#x6240;&#x6709;html&#x5143;&#x7D20;&#x4E0A;&#x5D4C;&#x5165;&#x81EA;&#x5B9A;&#x4E49;data&#x5C5E;&#x6027;&#x7684;&#x80FD;&#x529B;

data-*&#x7528;&#x6CD5;&#xFF1A;
    1.&#x5C5E;&#x6027;&#x540D;&#x4E0D;&#x5E94;&#x8BE5;&#x5305;&#x542B;&#x4EFB;&#x4F55;&#x5927;&#x5199;&#x5B57;&#x6BCD;&#xFF0C;&#x5E76;&#x4E14;&#x5728;&#x524D;&#x7F00; &quot;data-&quot; &#x4E4B;&#x540E;&#x5FC5;&#x987B;&#x6709;&#x81F3;&#x5C11;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;
    2.&#x5C5E;&#x6027;&#x503C;&#x53EF;&#x4EE5;&#x662F;&#x4EFB;&#x610F;&#x5B57;&#x7B26;&#x4E32;
    3.&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x62E5;&#x6709;&#x4EFB;&#x610F;&#x6570;&#x91CF;&#x7684;data&#x5C5E;&#x6027;
    4.data&#x5C5E;&#x6027;&#x65E0;&#x6CD5;&#x50A8;&#x5B58;&#x5BF9;&#x8C61;&#xFF0C;&#x5982;&#x9700;&#x50A8;&#x5B58;&#xFF0C;&#x53EF;&#x901A;&#x8FC7;&#x5BF9;&#x8C61;&#x5E8F;&#x5217;&#x5316;

data-*&#x5982;&#x4F55;&#x8BBE;&#x7F6E;&#x3001;&#x83B7;&#x53D6;&#xFF1A;
    1.&#x5982;&#x4F55;&#x8BBE;&#x7F6E;
        &#x901A;&#x8FC7;JavaScript&#x5185;&#x7F6E;&#x7684;setAttribute(&apos;data&#x5C5E;&#x6027;&#x540D;&apos;,&apos;&#x65B0;&#x5185;&#x5BB9;&apos;)&#x5373;&#x53EF;&#x8BBE;&#x7F6E;
        &#x901A;&#x8FC7;&#x8BE5;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x7684;(dataset) API&#x8BBE;&#x7F6E;data&#x503C;&#xFF0C;IE10&#x4EE5;&#x4E0A;&#x624D;&#x652F;&#x6301;&#xFF1B;
            var button = document.queryselector(&apos;button&apos;)
            button.dataset.data&#x5C5E;&#x6027;&#x540D; = &apos;&#x65B0;&#x5185;&#x5BB9;&apos; ; &#x8FD9;&#x91CC;&#x7684;data&#x5C5E;&#x6027;&#x540D;&#x662F;&#x6307;data-&#x540E;&#x9762;&#x7684;&#x540D;&#x5B57;

    2.&#x5982;&#x4F55;&#x83B7;&#x53D6;
        &#x901A;&#x8FC7;JavaScript&#x5185;&#x7F6E;&#x7684;getAttribute(&apos;data&#x5C5E;&#x6027;&#x540D;&apos;) &#x5373;&#x53EF;&#x83B7;&#x53D6;
        &#x901A;&#x8FC7;&#x8BE5;&#x6570;&#x636E;&#x7C7B;&#x578B;&#x7684;(dataset) API&#x8BBE;&#x7F6E;data&#x503C;&#xFF0C;IE10&#x4EE5;&#x4E0A;&#x624D;&#x652F;&#x6301;&#xFF1B;
            var button = document.queryselector(&apos;button&apos;)
            data = button.dataset.data&#x5C5E;&#x6027;&#x540D; ; &#x8FD9;&#x91CC;&#x7684;data&#x5C5E;&#x6027;&#x540D;&#x662F;&#x6307;data-&#x540E;&#x9762;&#x7684;&#x540D;&#x5B57;

data-*&#x4F18;&#x52BF;&#xFF1A;
    1.&#x5176;&#x50A8;&#x5B58;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x6570;&#x636E;&#x80FD;&#x591F;&#x88AB;&#x9875;&#x9762;&#x7684;JavaScript&#x5229;&#x7528;&#xFF0C;&#x53EF;&#x4EE5;&#x521B;&#x5EFA;&#x66F4;&#x597D;&#x7684;&#x7528;&#x6237;&#x4F53;&#x9A8C;
    2.&#x53EF;&#x4EE5;&#x901A;&#x8FC7;JavaScript&#x6765;&#x6784;&#x9020;&#x6570;&#x636E;&#x3001;&#x586B;&#x5145;&#x6570;&#x636E;
    3.&#x4EE3;&#x7801;&#x4F53;&#x79EF;&#x5C0F;&#x3001;&#x8F83;&#x4E3A;&#x7075;&#x6D3B;
    4.&#x89E3;&#x51B3;&#x7F51;&#x7AD9;&#x7684;&#x5916;&#x89C2;&#x548C;&#x5B9E;&#x7528;&#x6027;&#x4E4B;&#x95F4;&#x4EA7;&#x751F;&#x7684;&#x51B2;&#x7A81;
</code></pre>
                                    <h5
                                        id="8-&#x2605;-&#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;">
                                        <a name="8-&#x2605;-&#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#8-&#x2605;-&#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="8-&#x2605;-&#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;"
                                            class="plugin-anchor"
                                            href="#8-&#x2605;-&#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>8. &#x2605;
                                        &#x7B80;&#x8FF0;title&#x4E0E;h1&#x7684;&#x533A;&#x522B;&#xFF0C;b&#x4E0E;strong&#x7684;&#x533A;&#x522B;&#xFF0C;i&#x4E0E;em&#x7684;&#x533A;&#x522B;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">&#x300A;<span class="hljs-selector-tag">title</span>&#x4E0E;<span class="hljs-selector-tag">h1</span>&#x7684;&#x533A;&#x522B;&#x300B;&#xFF1A;
    1. &#x4ECE;&#x7F51;&#x7AD9;&#x89D2;&#x5EA6;&#x770B;&#xFF0C;<span class="hljs-selector-tag">title</span> &#x66F4;&#x91CD;&#x4E8E;&#x7F51;&#x7AD9;&#x4FE1;&#x606F;&#x3002;<span class="hljs-selector-tag">title</span>&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x544A;&#x8BC9;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x548C;&#x7528;&#x6237;&#x8FD9;&#x4E2A;&#x7F51;&#x7AD9;&#x662F;&#x5173;&#x4E8E;&#x4EC0;&#x4E48;&#x4E3B;&#x9898;&#x548C;&#x5185;&#x5BB9;&#x7684;&#x3002;
    2. &#x4ECE;&#x6587;&#x7AE0;&#x89D2;&#x5EA6;&#x770B;&#xFF0C;<span class="hljs-selector-tag">h1</span>&#x5219;&#x662F;&#x7528;&#x4E8E;&#x6982;&#x62EC;&#x6587;&#x7AE0;&#x4E3B;&#x9898;&#x3002;
    3. &#x4E00;&#x4E2A;&#x7F51;&#x7AD9;&#x53EF;&#x4EE5;&#x6709;&#x591A;&#x4E2A;<span class="hljs-selector-tag">title</span>,&#x6700;&#x597D;&#x4E00;&#x4E2A;&#x5355;&#x9875;&#x7528;&#x4E00;&#x4E2A;<span class="hljs-selector-tag">title</span>&#xFF0C;&#x4EE5;&#x4FBF;&#x7A81;&#x51FA;&#x7F51;&#x7AD9;&#x9875;&#x9762;&#x4E3B;&#x4F53;&#x4FE1;&#x606F;&#xFF0C;&#x4ECE;<span class="hljs-selector-tag">seo</span>&#x770B;&#xFF0C;<span class="hljs-selector-tag">title</span>&#x6743;&#x91CD;&#x6BD4;<span class="hljs-selector-tag">h1</span>&#x9AD8;&#xFF0C;&#x9002;&#x7528;&#x6027;&#x6BD4;<span class="hljs-selector-tag">h1</span>&#x5E7F;&#x3002;
    4. &#x6807;&#x8BB0;&#x4E86;<span class="hljs-selector-tag">h1</span>&#x7684;&#x6587;&#x5B57;&#x9875;&#x9762;&#x7ED9;&#x4E88;&#x7684;&#x6743;&#x91CD;&#x4F1A;&#x6BD4;&#x9875;&#x9762;&#x5185;&#x5176;&#x4ED6;&#x6743;&#x91CD;&#x9AD8;&#x5F88;&#x591A;&#x3002;&#x4E00;&#x4E2A;&#x597D;&#x7684;&#x7F51;&#x7AD9;&#x662F;<span class="hljs-selector-tag">h1</span>&#x548C;<span class="hljs-selector-tag">title</span>&#x5E76;&#x5B58;&#xFF0C;&#x65E2;&#x7A81;&#x51FA;<span class="hljs-selector-tag">h1</span>&#x6587;&#x7AE0;&#x4E3B;&#x9898;&#xFF0C;&#x53C8;&#x7A81;&#x51FA;&#x7F51;&#x7AD9;&#x4E3B;&#x9898;&#x548C;&#x5173;&#x952E;&#x5B57;&#x3002;&#x8FBE;&#x5230;&#x53CC;&#x91CD;&#x4F18;&#x5316;&#x7F51;&#x7AD9;&#x7684;&#x6548;&#x679C;&#x3002;

&#x300A;<span class="hljs-selector-tag">b</span>&#x4E0E;<span class="hljs-selector-tag">strong</span> &#x7684;&#x533A;&#x522B;&#x300B;&#xFF1A;
    1. <span class="hljs-selector-tag">b</span> &#x662F;&#x53EA;&#x662F;&#x5BF9;&#x6587;&#x672C;&#x7684;&#x7B80;&#x5355;&#x52A0;&#x7C97;&#xFF0C; <span class="hljs-selector-tag">strong</span> &#x662F;&#x4E00;&#x4E2A;&#x8BED;&#x4E49;&#x5316;&#x6807;&#x7B7E;&#xFF0C;&#x5BF9;&#x76F8;&#x5173;&#x6587;&#x672C;&#x5177;&#x6709;&#x5F3A;&#x8C03;&#x4F5C;&#x7528;
    2. <span class="hljs-selector-tag">b</span> &#x6807;&#x7B7E;&#x53EA;&#x662F;&#x4FA7;&#x91CD;&#x4E8E;&#x5B57;&#x4F53;&#x52A0;&#x7C97;&#xFF0C; <span class="hljs-selector-tag">strong</span>&#x6807;&#x7B7E;&#x52A0;&#x5F3A;&#x5B57;&#x4F53;&#x7684;&#x8BED;&#x6C14;&#x90FD;&#x662F;&#x901A;&#x8FC7;&#x7C97;&#x4F53;&#x6765;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x76F8;&#x6BD4;&#x4E4B;&#x4E0B;&#xFF0C;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x66F4;&#x559C;&#x6B22;&#x4FA7;&#x91CD;&#x4E8E;<span class="hljs-selector-tag">strong</span>&#x6807;&#x7B7E;
    3. <span class="hljs-selector-tag">strong</span>&#x6807;&#x7B7E;&#x66F4;&#x6CE8;&#x91CD;&#x4E8E;&#x5185;&#x5BB9;&#x4E0A;&#x7684;&#x5E94;&#x7528;&#xFF0C;&#x5728;<span class="hljs-selector-tag">html</span>&#x4E2D;&#xFF0C;&#x5BF9;&#x5173;&#x952E;&#x8BCD;&#x7684;&#x6807;&#x660E;&#xFF0C;&#x7136;&#x800C;&#x8FD8;&#x6709;&#x4E00;&#x4E9B;&#x7F51;&#x7AD9;&#x4E0A;&#xFF0C;&#x4E5F;&#x6709;&#x4F7F;&#x7528;<span class="hljs-selector-tag">strong</span>&#x6807;&#x7B7E;&#x767B;&#x5BF9;&#x5C0F;&#x6807;&#x9898;&#x8FDB;&#x884C;&#x5F3A;&#x8C03;&#xFF0C;&#x4F46;&#x662F;&#x5728;&#x9875;&#x9762;&#x4E2D;&#xFF0C;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x8FC7;&#x591A;&#x7684;<span class="hljs-selector-tag">strong</span>&#x6807;&#x7B7E;&#xFF0C;&#x53EF;&#x80FD;&#x4F1A;&#x5BF9;&#x6392;&#x540D;&#x4E0D;&#x5229;&#x3002;

&#x300A;<span class="hljs-selector-tag">i</span> &#x4E0E; <span class="hljs-selector-tag">em</span> &#x7684;&#x533A;&#x522B;&#x300B;&#xFF1A;
    1. <span class="hljs-selector-tag">i</span>(<span class="hljs-selector-tag">italic</span>)&#x662F;&#x5B9E;&#x4F53;&#x6807;&#x7B7E;&#xFF0C;&#x7528;&#x6765;&#x4F7F;&#x5B57;&#x7B26;&#x503E;&#x659C;&#xFF0C;<span class="hljs-selector-tag">em</span>(<span class="hljs-selector-tag">emphasis</span>)&#x662F;&#x903B;&#x8F91;&#x6807;&#x7B7E;&#xFF0C;&#x4F5C;&#x7528;&#x662F;&#x5F3A;&#x8C03;&#x6587;&#x672C;&#x5185;&#x5BB9; 
    2. <span class="hljs-selector-tag">i</span>&#x6807;&#x7B7E;&#x53EA;&#x662F;&#x659C;&#x4F53;&#x7684;&#x6837;&#x5F0F;&#xFF0C;&#x6CA1;&#x6709;&#x5B9E;&#x9645;&#x542B;&#x4E49;&#xFF0C;&#x5E38;&#x7528;&#x6765;&#x8868;&#x8FBE;&#x65E0;&#x5F3A;&#x8C03;&#x6216;&#x7740;&#x91CD;&#x610F;&#x5473;&#x7684;&#x659C;&#x4F53;&#xFF0C;&#x6BD4;&#x5982;&#x751F;&#x7269;&#x5B66;&#x540D;&#x3001;&#x672F;&#x8BED;&#x3001;&#x5916;&#x6765;&#x8BED;&#xFF1B;
    3. <span class="hljs-selector-tag">em</span>&#x8868;&#x793A;&#x6807;&#x7B7E;&#x5185;&#x5B57;&#x7B26;&#x91CD;&#x8981;&#xFF0C;&#x7528;&#x4EE5;&#x5F3A;&#x8C03;&#xFF0C;&#x5176;&#x9ED8;&#x8BA4;&#x683C;&#x5F0F;&#x662F;&#x659C;&#x4F53;&#xFF0C;&#x4F46;&#x662F;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<span class="hljs-selector-tag">CSS</span>&#x6DFB;&#x52A0;&#x6837;&#x5F0F;&#x3002;
    &#x5EFA;&#x8BAE;&#xFF1A;&#x4E3A;&#x4E86;&#x7B26;&#x5408;<span class="hljs-selector-tag">CSS3</span>&#x7684;&#x89C4;&#x8303;&#xFF0C;<span class="hljs-selector-tag">i</span> &#x6807;&#x7B7E;&#x5E94;&#x5C3D;&#x91CF;&#x5C11;&#x7528;&#x800C;&#x5E94;&#x6539;&#x7528; <span class="hljs-selector-tag">em</span>
</code></pre>
                                    <h5
                                        id="9-&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;">
                                        <a name="9-&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#9-&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="9-&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;"
                                            class="plugin-anchor"
                                            href="#9-&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>9. &#x2605;
                                        &#x4EC0;&#x4E48;&#x662F;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;
                                    </h5>
                                    <pre><code class="lang-css">*** &#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;&#x6307;&#x7684;&#x662F;&#x5143;&#x7D20;&#x6392;&#x7248;&#x5E03;&#x5C40;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;&#x5143;&#x7D20;&#x4F1A;&#x9ED8;&#x8BA4;&#x81EA;&#x52A8;&#x4ECE;&#x5DE6;&#x5F80;&#x53F3;&#xFF0C;&#x4ECE;&#x4E0A;&#x5F80;&#x4E0B;&#x7684;&#x6D41;&#x5F0F;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;&#x5F53;&#x524D;&#x9762;&#x5185;&#x5BB9;&#x53D1;&#x751F;&#x4E86;&#x53D8;&#x5316;&#xFF0C;&#x540E;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x4F4D;&#x7F6E;&#x4E5F;&#x4F1A;&#x968F;&#x7740;&#x53D1;&#x751F;&#x53D8;&#x5316;&#x3002;

*** <span class="hljs-selector-tag">HTML</span>&#x5C31;&#x662F;&#x4E00;&#x79CD;&#x6807;&#x51C6;&#x6587;&#x6863;&#x6D41;&#x6587;&#x4EF6;&#x3002;

&#x7B80;&#x5355;&#x7684;&#x6765;&#x8BF4;&#x5C31;&#x662F;&#x5404;&#x79CD;&#x5E03;&#x5C40;&#x5C5E;&#x6027;&#x5728;<span class="hljs-selector-tag">html</span>&#x4E2D;&#x6240;&#x663E;&#x793A;&#x7684;&#x6548;&#x679C;&#xFF0C;&#x5982;<span class="hljs-selector-tag">display</span>&#xFF08;&#x884C;&#x5185;&#x5143;&#x7D20;&#x4E0E;&#x5757;&#x7EA7;&#x5143;&#x7D20;*&#x975E;&#x5E38;&#x91CD;&#x8981;*&#xFF09;&#x3001;<span class="hljs-selector-tag">float</span>&#x3001;<span class="hljs-selector-tag">position</span>
</code></pre>
                                    <h5
                                        id="10-&#x2605;-z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;">
                                        <a name="10-&#x2605;-z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#10-&#x2605;-z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="10-&#x2605;-z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;"
                                            class="plugin-anchor"
                                            href="#10-&#x2605;-z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>10. &#x2605;
                                        z-index&#x662F;&#x4EC0;&#x4E48;&#xFF1F;&#x5728;position&#x7684;&#x503C;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x89E6;&#x53D1;?
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">z-index</span> : &#x6307;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x5728;&#x5F53;&#x524D;&#x6587;&#x6863;&#x9875;&#x9762;&#x5B9A;&#x4F4D;&#x65F6;&#x91CD;&#x53E0;&#x5C42;&#x663E;&#x793A;&#x7684;&#x5C42;&#x7EA7;&#x7B49;&#x7EA7;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;0 &#xFF0C;&#x6570;&#x503C;&#x4E0D;&#x9650;&#xFF0C;&#x8D8A;&#x5927;&#x663E;&#x793A;&#x5C42;&#x7EA7;&#x8D8A;&#x9AD8;

&#x89E6;&#x53D1;&#x673A;&#x5236;&#xFF1A;&#x5F53;<span class="hljs-selector-tag">position</span>&#x7684;&#x503C;&#x8BBE;&#x7F6E;&#x4E3A;<span class="hljs-selector-tag">absolute</span>&#x3001;<span class="hljs-selector-tag">relative</span>&#x548C;<span class="hljs-selector-tag">fixed</span>&#x65F6;&#x624D;&#x80FD;&#x89E6;&#x53D1;
</code></pre>
                                    <h5
                                        id="11-&#x2605;&#x2605;-css3-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;">
                                        <a name="11-&#x2605;&#x2605;-css3-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#11-&#x2605;&#x2605;-css3-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="11-&#x2605;&#x2605;-css3-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#11-&#x2605;&#x2605;-css3-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>11. &#x2605;&#x2605; CSS3
                                        &#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x5706;&#x89D2;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">border-radius</span>&#x5C5E;&#x6027;
    1. &#x56DB;&#x4E2A;&#x503C;: &#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x4E3A;&#x5DE6;&#x4E0A;&#x89D2;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x503C;&#x4E3A;&#x53F3;&#x4E0A;&#x89D2;&#xFF0C;&#x7B2C;&#x4E09;&#x4E2A;&#x503C;&#x4E3A;&#x53F3;&#x4E0B;&#x89D2;&#xFF0C;&#x7B2C;&#x56DB;&#x4E2A;&#x503C;&#x4E3A;&#x5DE6;&#x4E0B;&#x89D2;&#x3002;
    2. &#x4E09;&#x4E2A;&#x503C;: &#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x4E3A;&#x5DE6;&#x4E0A;&#x89D2;, &#x7B2C;&#x4E8C;&#x4E2A;&#x503C;&#x4E3A;&#x53F3;&#x4E0A;&#x89D2;&#x548C;&#x5DE6;&#x4E0B;&#x89D2;&#xFF0C;&#x7B2C;&#x4E09;&#x4E2A;&#x503C;&#x4E3A;&#x53F3;&#x4E0B;&#x89D2;
    3. &#x4E24;&#x4E2A;&#x503C;: &#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x4E3A;&#x5DE6;&#x4E0A;&#x89D2;&#x4E0E;&#x53F3;&#x4E0B;&#x89D2;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x503C;&#x4E3A;&#x53F3;&#x4E0A;&#x89D2;&#x4E0E;&#x5DE6;&#x4E0B;&#x89D2;
    4. &#x4E00;&#x4E2A;&#x503C;&#xFF1A; &#x56DB;&#x4E2A;&#x5706;&#x89D2;&#x503C;&#x76F8;&#x540C;
&#x53EA;&#x9700;&#x8981;&#x4F7F;&#x7528;<span class="hljs-selector-tag">border-radius</span>&#x5C06;&#x56DB;&#x4E2A;&#x89D2;&#x8BBE;&#x7F6E;&#x4E3A;&#x76F8;&#x9002;&#x5E94;&#x7684;&#x5C3A;&#x5BF8;&#x5373;&#x53EF;&#x5B9E;&#x73B0;&#x5706;&#x89D2;
</code></pre>
                                    <h5
                                        id="12-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;">
                                        <a name="12-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#12-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="12-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#12-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>12. &#x2605;&#x2605;
                                        HTML5&#x6709;&#x54EA;&#x4E9B;&#x7F13;&#x5B58;&#x65B9;&#x5F0F;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">1&#x3001;<span class="hljs-selector-tag">localstorege</span>&#x7F13;&#x5B58;&#xFF0C;&#x5C06;&#x6570;&#x636E;&#x50A8;&#x5B58;&#x5728;&#x672C;&#x5730;&#x5BA2;&#x6237;&#x7AEF;&#xFF0C;&#x53EA;&#x6709;&#x7528;&#x6237;&#x624B;&#x52A8;&#x6E05;&#x9664;&#x624D;&#x80FD;&#x6E05;&#x9664;&#x7F13;&#x5B58;
    <span class="hljs-selector-tag">API</span>&#xFF1A;1<span class="hljs-selector-class">.localstorege</span><span class="hljs-selector-class">.setItem</span>(<span class="hljs-selector-tag">key</span>,<span class="hljs-selector-tag">value</span>)&#xFF0C;&#x952E;&#x503C;&#x5BF9;&#x7684;&#x5F62;&#x5F0F;&#x7F13;&#x5B58;
        2<span class="hljs-selector-class">.localstorege</span><span class="hljs-selector-class">.getItem</span>(<span class="hljs-selector-tag">key</span>)&#xFF0C;&#x6839;&#x636E;&#x952E;&#x540D;&#x6765;&#x7F13;&#x5B58;&#x503C;
        3<span class="hljs-selector-class">.localstorege</span><span class="hljs-selector-class">.length</span> &#xFF0C;&#x83B7;&#x53D6;&#x603B;&#x7F13;&#x5B58;&#x6570;&#x91CF;

2&#x3001;<span class="hljs-selector-tag">sessionStorege</span> &#x4F1A;&#x8BDD;&#x7F13;&#x5B58;&#xFF0C;&#x4F1A;&#x8BDD;&#x673A;&#x5236;&#x662F;&#x6307;&#x4ECE;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;&#x5F00;&#x59CB;&#x8BBF;&#x95EE;&#x9875;&#x9762;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5230;&#x5173;&#x95ED;&#x8FD9;&#x4E2A;&#x9875;&#x9762;&#x7684;&#x8FC7;&#x7A0B;&#x6210;&#x4E3A;&#x4E00;&#x4E2A;&#x4F1A;&#x8BDD;&#xFF0C;<span class="hljs-selector-tag">sessionStorege</span>&#x50A8;&#x5B58;&#x7684;&#x6570;&#x636E;&#x4F1A;&#x968F;&#x7740;&#x9875;&#x9762;&#x5173;&#x95ED;&#x800C;&#x9500;&#x6BC1;
    <span class="hljs-selector-tag">API</span>: 1. <span class="hljs-selector-tag">sessionStorage</span><span class="hljs-selector-class">.setItem</span>(<span class="hljs-selector-tag">key</span>,<span class="hljs-selector-tag">val</span>)&#xFF0C;<span class="hljs-selector-tag">localStorage</span>&#x662F;&#x4EE5;&#x952E;&#x503C;&#x5BF9;&#x7684;&#x5F62;&#x5F0F;&#x521B;&#x5EFA;&#x7684;&#xFF1B;
         2. <span class="hljs-selector-tag">sessionStorage</span><span class="hljs-selector-class">.getItem</span>(<span class="hljs-selector-tag">key</span>)&#xFF0C;&#x6839;&#x636E;&#x952E;&#x540D;&#x6765;&#x83B7;&#x53D6;&#x7F13;&#x5B58;&#x7684;&#x503C;&#xFF1B;
         3. <span class="hljs-selector-tag">sessionStorage</span><span class="hljs-selector-class">.length</span>&#xFF1B;&#x83B7;&#x53D6;&#x603B;&#x5171;&#x7F13;&#x5B58;&#x503C;&#x5F97;&#x6570;&#x91CF;&#xFF0C; <span class="hljs-selector-tag">localStoarge</span>&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x4E2A;&#x5BF9;&#x8C61;&#xFF1B;

3&#x3001;&#x79BB;&#x7EBF;&#x7F13;&#x5B58;&#x673A;&#x5236;(<span class="hljs-selector-tag">Application</span> <span class="hljs-selector-tag">Cache</span>)
    1. &#x914D;&#x7F6E;<span class="hljs-selector-tag">manifest</span>&#x6587;&#x4EF6;&#xFF0C;<span class="hljs-selector-tag">manifest</span> &#x6587;&#x4EF6;&#x662F;&#x7B80;&#x5355;&#x7684;&#x6587;&#x672C;&#x6587;&#x4EF6;&#xFF0C;&#x5B83;&#x544A;&#x77E5;&#x6D4F;&#x89C8;&#x5668;&#x88AB;&#x7F13;&#x5B58;&#x7684;&#x5185;&#x5BB9;&#xFF08;&#x4EE5;&#x53CA;&#x4E0D;&#x7F13;&#x5B58;&#x7684;&#x5185;&#x5BB9;&#xFF09;
    2. <span class="hljs-selector-tag">manifest</span> &#x6587;&#x4EF6;&#x53EF;&#x5206;&#x4E3A;&#x4E09;&#x4E2A;&#x90E8;&#x5206;&#xFF1A;
        1&#x3001;<span class="hljs-selector-tag">CACHE</span> <span class="hljs-selector-tag">MANIFEST</span> <span class="hljs-selector-tag">-</span> &#x5728;&#x6B64;&#x6807;&#x9898;&#x4E0B;&#x5217;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x5C06;&#x5728;&#x9996;&#x6B21;&#x4E0B;&#x8F7D;&#x540E;&#x8FDB;&#x884C;&#x7F13;&#x5B58;
        2&#x3001;<span class="hljs-selector-tag">NETWORK</span> <span class="hljs-selector-tag">-</span> &#x5728;&#x6B64;&#x6807;&#x9898;&#x4E0B;&#x5217;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x9700;&#x8981;&#x4E0E;&#x670D;&#x52A1;&#x5668;&#x7684;&#x8FDE;&#x63A5;&#xFF0C;&#x4E14;&#x4E0D;&#x4F1A;&#x88AB;&#x7F13;&#x5B58;
        3&#x3001;<span class="hljs-selector-tag">FALLBACK</span> <span class="hljs-selector-tag">-</span> &#x5728;&#x6B64;&#x6807;&#x9898;&#x4E0B;&#x5217;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x89C4;&#x5B9A;&#x5F53;&#x9875;&#x9762;&#x65E0;&#x6CD5;&#x8BBF;&#x95EE;&#x65F6;&#x7684;&#x56DE;&#x9000;&#x9875;&#x9762;&#xFF08;&#x6BD4;&#x5982; 404 &#x9875;&#x9762;&#xFF09;
    3. <span class="hljs-selector-tag">API</span>&#xFF1A; 0&#xFF08;<span class="hljs-selector-tag">UNCACHED</span>&#xFF09; : &#x65E0;&#x7F13;&#x5B58;&#xFF0C; &#x5373;&#x6CA1;&#x6709;&#x4E0E;&#x9875;&#x9762;&#x76F8;&#x5173;&#x7684;&#x5E94;&#x7528;&#x7F13;&#x5B58;
            1&#xFF08;<span class="hljs-selector-tag">IDLE</span>&#xFF09; : &#x95F2;&#x7F6E;&#xFF0C;&#x5373;&#x5E94;&#x7528;&#x7F13;&#x5B58;&#x672A;&#x5F97;&#x5230;&#x66F4;&#x65B0;
            2 &#xFF08;<span class="hljs-selector-tag">CHECKING</span>&#xFF09; : &#x68C0;&#x67E5;&#x4E2D;&#xFF0C;&#x5373;&#x6B63;&#x5728;&#x4E0B;&#x8F7D;&#x63CF;&#x8FF0;&#x6587;&#x4EF6;&#x5E76;&#x68C0;&#x67E5;&#x66F4;&#x65B0;
            3 &#xFF08;<span class="hljs-selector-tag">DOWNLOADING</span>&#xFF09; : &#x4E0B;&#x8F7D;&#x4E2D;&#xFF0C;&#x5373;&#x5E94;&#x7528;&#x7F13;&#x5B58;&#x6B63;&#x5728;&#x4E0B;&#x8F7D;&#x63CF;&#x8FF0;&#x6587;&#x4EF6;&#x4E2D;&#x6307;&#x5B9A;&#x7684;&#x8D44;&#x6E90;
            4 &#xFF08;<span class="hljs-selector-tag">UPDATEREADY</span>&#xFF09; : &#x66F4;&#x65B0;&#x5B8C;&#x6210;&#xFF0C;&#x6240;&#x6709;&#x8D44;&#x6E90;&#x90FD;&#x5DF2;&#x4E0B;&#x8F7D;&#x5B8C;&#x6BD5;
            5 &#xFF08;<span class="hljs-selector-tag">IDLE</span>&#xFF09; : &#x5E9F;&#x5F03;&#xFF0C;&#x5373;&#x5E94;&#x7528;&#x7F13;&#x5B58;&#x7684;&#x63CF;&#x8FF0;&#x6587;&#x4EF6;&#x5DF2;&#x7ECF;&#x4E0D;&#x5B58;&#x5728;&#x4E86;&#xFF0C;&#x56E0;&#x6B64;&#x9875;&#x9762;&#x65E0;&#x6CD5;&#x518D;&#x8BBF;&#x95EE;&#x5E94;&#x7528;&#x7F13;&#x5B58;
4&#x3001;<span class="hljs-selector-tag">web</span> <span class="hljs-selector-tag">SQL</span>
    1. &#x5173;&#x7CFB;&#x6570;&#x636E;&#x5E93;&#xFF0C;&#x901A;&#x8FC7;<span class="hljs-selector-tag">SQL</span>&#x8BED;&#x53E5;&#x8BBF;&#x95EE;
    2. <span class="hljs-selector-tag">Web</span> <span class="hljs-selector-tag">SQL</span> &#x6570;&#x636E;&#x5E93;<span class="hljs-selector-tag">API</span>&#x5E76;&#x4E0D;&#x662F;<span class="hljs-selector-tag">HTML5</span> &#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x4F46;&#x662F;&#x5B83;&#x662F;&#x4E00;&#x4E2A;&#x72EC;&#x7ACB;&#x7684;&#x89C4;&#x8303;&#xFF0C;&#x5F15;&#x5165;&#x4E86;&#x4E00;&#x7EC4;&#x4F7F;&#x7528;<span class="hljs-selector-tag">SQL</span>&#x64CD;&#x4F5C;&#x5BA2;&#x6237;&#x7AEF;&#x6570;&#x636E;&#x5E93;&#x7684;<span class="hljs-selector-tag">APIs</span>
    3. &#x652F;&#x6301;&#x60C5;&#x51B5;&#xFF1A;<span class="hljs-selector-tag">Web</span> <span class="hljs-selector-tag">SQL</span> &#x6570;&#x636E;&#x5E93;&#x53EF;&#x4EE5;&#x5728;&#x6700;&#x65B0;&#x7248;&#x7684; <span class="hljs-selector-tag">Safari</span>, <span class="hljs-selector-tag">Chrome</span> &#x548C; <span class="hljs-selector-tag">Opera</span> &#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x5DE5;&#x4F5C;&#x3002;
    4. <span class="hljs-selector-tag">API</span>&#xFF1A;1. <span class="hljs-selector-tag">openDatabase</span>&#xFF1A;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x4F7F;&#x7528;&#x73B0;&#x6709;&#x7684;&#x6570;&#x636E;&#x5E93;&#x6216;&#x8005;&#x65B0;&#x5EFA;&#x7684;&#x6570;&#x636E;&#x5E93;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6570;&#x636E;&#x5E93;&#x5BF9;&#x8C61;&#x3002;
            2. <span class="hljs-selector-tag">transaction</span>&#xFF1A;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x8BA9;&#x6211;&#x4EEC;&#x80FD;&#x591F;&#x63A7;&#x5236;&#x4E00;&#x4E2A;&#x4E8B;&#x52A1;&#xFF0C;&#x4EE5;&#x53CA;&#x57FA;&#x4E8E;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x6267;&#x884C;&#x63D0;&#x4EA4;&#x6216;&#x8005;&#x56DE;&#x6EDA;&#x3002;
            3. <span class="hljs-selector-tag">executeSql</span>&#xFF1A;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x7528;&#x4E8E;&#x6267;&#x884C;&#x5B9E;&#x9645;&#x7684; <span class="hljs-selector-tag">SQL</span> &#x67E5;&#x8BE2;&#x3002;

5&#x3001; <span class="hljs-selector-tag">IndexDB</span>
    1.&#x7D22;&#x5F15;&#x6570;&#x636E;&#x5E93; (<span class="hljs-selector-tag">IndexedDB</span>) <span class="hljs-selector-tag">API</span>&#xFF08;&#x4F5C;&#x4E3A; <span class="hljs-selector-tag">HTML5</span> &#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF09;&#x5BF9;&#x521B;&#x5EFA;&#x5177;&#x6709;&#x4E30;&#x5BCC;&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6570;&#x636E;&#x7684;&#x6570;&#x636E;&#x5BC6;&#x96C6;&#x578B;&#x7684;&#x79BB;&#x7EBF; <span class="hljs-selector-tag">HTML5</span> <span class="hljs-selector-tag">Web</span> &#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x5F88;&#x6709;&#x7528;&#x3002;&#x540C;&#x65F6;&#x5B83;&#x8FD8;&#x6709;&#x52A9;&#x4E8E;&#x672C;&#x5730;&#x7F13;&#x5B58;&#x6570;&#x636E;&#xFF0C;&#x4F7F;&#x4F20;&#x7EDF;&#x5728;&#x7EBF; <span class="hljs-selector-tag">Web</span> &#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#xFF08;&#x6BD4;&#x5982;&#x79FB;&#x52A8; <span class="hljs-selector-tag">Web</span> &#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#xFF09;&#x80FD;&#x591F;&#x66F4;&#x5FEB;&#x5730;&#x8FD0;&#x884C;&#x548C;&#x54CD;&#x5E94;&#x3002;
</code></pre>
                                    <h5
                                        id="13-&#x2605;&#x2605;-css3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;">
                                        <a name="13-&#x2605;&#x2605;-css3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#13-&#x2605;&#x2605;-css3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="13-&#x2605;&#x2605;-css3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#13-&#x2605;&#x2605;-css3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>13. &#x2605;&#x2605;
                                        CSS3&#x65B0;&#x589E;&#x4F2A;&#x7C7B;&#x6709;&#x90A3;&#x4E9B;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5E38;&#x7528;&#x7684;&#x4F2A;&#x7C7B;&#xFF1A;
    1. <span class="hljs-selector-pseudo">:link</span> &#x9009;&#x62E9;&#x6240;&#x6709;&#x672A;&#x8BBF;&#x95EE;&#x7684;&#x94FE;&#x63A5;
    2. <span class="hljs-selector-pseudo">:visited</span> &#x9009;&#x62E9;&#x6240;&#x6709;&#x8BBF;&#x95EE;&#x8FC7;&#x7684;&#x94FE;&#x63A5;
    3. <span class="hljs-selector-pseudo">:active</span> &#x9009;&#x62E9;&#x6B63;&#x5728;&#x6D3B;&#x52A8;&#x7684;&#x94FE;&#x63A5;&#xFF08;&#x6216;&#x7406;&#x89E3;&#x4E3A;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x77AC;&#x95F4;&#x6548;&#x679C;&#xFF09;
    4. <span class="hljs-selector-pseudo">:hover</span> &#x9F20;&#x6807;&#x653E;&#x5230;&#x94FE;&#x63A5;&#x540E;&#x7684;&#x72B6;&#x6001;
    5. <span class="hljs-selector-pseudo">:focus</span> &#x9009;&#x62E9;&#x5143;&#x7D20;&#x8F93;&#x5165;&#x540E;&#x5177;&#x6709;&#x7126;&#x70B9;
    6. <span class="hljs-selector-pseudo">:before</span> &#x5728;&#x5143;&#x7D20;&#x4E4B;&#x524D;&#x63D2;&#x5165;&#x5185;&#x5BB9;
    7. <span class="hljs-selector-pseudo">:after</span> &#x5728;&#x5143;&#x7D20;&#x4E4B;&#x540E;&#x63D2;&#x5165;&#x5185;&#x5BB9;
</code></pre>
                                    <h5
                                        id="14-&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;">
                                        <a name="14-&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#14-&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="14-&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;"
                                            class="plugin-anchor"
                                            href="#14-&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>14. &#x2605;
                                        &#x7B80;&#x8FF0;&#x4E00;&#x4E0B;src&#x4E0E;href&#x7684;&#x533A;&#x522B;&#xFF0C;title&#x548C;alt&#x7684;&#x533A;&#x522B;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">href</span>&#xFF1A;<span class="hljs-selector-tag">href</span>&#x8868;&#x793A;&#x8D85;&#x6587;&#x672C;&#x5F15;&#x7528;&#xFF0C;&#x7528;&#x6765;&#x5EFA;&#x7ACB;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x548C;&#x6587;&#x6863;&#x4E4B;&#x95F4;&#x7684;&#x94FE;&#x63A5;&#xFF0C;&#x5E38;&#x7528;&#x5728;<span class="hljs-selector-tag">link</span>&#x548C;<span class="hljs-selector-tag">a</span>&#x7B49;&#x5143;&#x7D20;&#x4E0A;&#x3002;
    &#x6CE8;&#xFF1A;&#x5F53;&#x6D4F;&#x89C8;&#x5668;&#x89E3;&#x6790;&#x5230;&#x8FD9;&#x4E00;&#x53E5;&#x65F6;&#x4F1A;&#x8BC6;&#x522B;&#x8BE5;&#x6587;&#x6863;&#x4E3A;<span class="hljs-selector-tag">css</span>&#x6587;&#x4EF6;&#xFF0C;&#x4F1A;&#x4E0B;&#x8F7D;&#x5E76;&#x4E0D;&#x4F1A;&#x505C;&#x6B62;&#x5BF9;&#x5F53;&#x524D;&#x6587;&#x6863;&#x7684;&#x5904;&#x7406;&#xFF0C;&#x6240;&#x4EE5;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;<span class="hljs-selector-tag">link</span>&#x65B9;&#x5F0F;&#x800C;&#x4E0D;&#x662F;@<span class="hljs-keyword">import&#x52A0;&#x8F7D;css&#x3002;</span>

src&#xFF1A;src&#x8868;&#x793A;&#x5F15;&#x7528;&#x8D44;&#x6E90;&#xFF0C;&#x66FF;&#x6362;&#x5F53;&#x524D;&#x5143;&#x7D20;&#xFF0C;&#x662F;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x4E0D;&#x53EF;&#x7F3A;&#x5C11;&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x5E38;&#x7528;&#x5728;img&#xFF0C;script&#xFF0C;iframe&#x4E0A;&#x3002;src&#x6307;&#x5411;&#x5916;&#x90E8;&#x8D44;&#x6E90;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x6307;&#x5411;&#x7684;&#x5185;&#x90E8;&#x4F1A;&#x8FC1;&#x5165;&#x5230;&#x6587;&#x6863;&#x4E2D;&#x5F53;&#x524D;&#x6807;&#x7B7E;&#x6240;&#x5728;&#x7684;&#x4F4D;&#x7F6E;&#xFF1B;&#x8BF7;&#x6C42;src&#x8D44;&#x6E90;&#x65F6;&#x4F1A;&#x5C06;&#x5176;&#x6307;&#x5411;&#x7684;&#x8D44;&#x6E90;&#x4E0B;&#x8F7D;&#x5E76;&#x5E94;&#x7528;&#x5230;&#x5F53;&#x524D;&#x6587;&#x6863;&#x4E2D;,&#x4F8B;&#x5982;js&#x811A;&#x672C;&#x3001;img&#x56FE;&#x7247;&#x7B49;&#x3002;src&#x94FE;&#x63A5;&#x5185;&#x7684;&#x5730;&#x5740;&#x4E0D;&#x4F1A;&#x6709;&#x8DE8;&#x57DF;&#x95EE;&#x9898;
     &#x6CE8;&#xFF1A;&#x5F53;&#x6D4F;&#x89C8;&#x5668;&#x89E3;&#x6790;&#x5230;&#x8FD9;&#x4E00;&#x53E5;&#x65F6;&#x4F1A;&#x6682;&#x505C;&#x5176;&#x4ED6;&#x8D44;&#x6E90;&#x7684;&#x4E0B;&#x8F7D;&#x548C;&#x5904;&#x7406;&#xFF0C;&#x76F4;&#x81F3;&#x5C06;&#x8BE5;&#x8D44;&#x6E90;&#x52A0;&#x8F7D;&#x3001;&#x7F16;&#x8BD1;&#x3001;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#x3002;&#x8FD9;&#x4E5F;&#x662F;js&#x811A;&#x672C;&#x653E;&#x5728;&#x5E95;&#x90E8;&#x800C;&#x4E0D;&#x662F;&#x5934;&#x90E8;&#x7684;&#x95EE;&#x9898;

title&#xFF1A;
    <span class="hljs-number">1</span>. title&#x5C5E;&#x6027;&#x662F;&#x4E3A;&#x5143;&#x7D20;&#x63D0;&#x4F9B;&#x989D;&#x5916;&#x7684;&#x6CE8;&#x91CA;&#x4FE1;&#x606F;&#xFF0C;&#x5F53;&#x9F20;&#x6807;&#x653E;&#x5728;&#x5143;&#x7D20;&#x4E0A;&#x65F6;&#x4F1A;&#x6709;title&#x6587;&#x5B57;&#x663E;&#x793A;&#xFF0C;&#x4EE5;&#x8FBE;&#x5230;&#x8865;&#x5145;&#x8BF4;&#x660E;&#x6216;&#x63D0;&#x793A;&#x3002;
       <span class="hljs-number">2</span>. title&#x5C5E;&#x6027;&#x66F4;&#x503E;&#x5411;&#x4E8E;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x7684;&#x8003;&#x8651;&#x3002;
    <span class="hljs-number">3</span>. title&#x65E2;&#x53EF;&#x4EE5;&#x662F;&#x5143;&#x7D20;&#x7684;&#x5C5E;&#x6027;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x6807;&#x7B7E;&#xFF0C;&#x4F5C;&#x4E3A;&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x7528;&#x5728;&#x9664;base,basefont,head,html,meta,param,script&#x548C;title&#x4E4B;&#x5916;&#x7684;&#x4EFB;&#x4F55;&#x6807;&#x7B7E;&#x4E0A;&#xFF08;title&#x5E38;&#x4E0E;form&#x4EE5;&#x53CA;a&#x6807;&#x7B7E;&#x4E00;&#x540C;&#x4F7F;&#x7528;&#xFF0C;&#x4EE5;&#x63D0;&#x4F9B;&#x5173;&#x4E8E;&#x8F93;&#x5165;&#x683C;&#x5F0F;&#x548C;&#x94FE;&#x63A5;&#x76EE;&#x6807;&#x7684;&#x4FE1;&#x606F;&#xFF09;&#xFF0C;title&#x4E0E;style&#x3001;id&#x3001;class&#x7B49;&#x4E00;&#x8D77;&#x4F5C;&#x4E3A;HTML&#x4E2D;&#x8BB8;&#x591A;&#x6807;&#x7B7E;&#x5171;&#x7528;&#x7684;&#x6807;&#x51C6;&#x5C5E;&#x6027;&#x3002;

alt&#xFF1A;
    <span class="hljs-number">1</span>. alt&#x5C5E;&#x6027;&#x662F;&#x5728;&#x4F60;&#x7684;&#x56FE;&#x7247;&#x65E0;&#x6CD5;&#x663E;&#x793A;&#x65F6;&#x7684;&#x66FF;&#x4EE3;&#x6587;&#x672C;&#xFF0C;&#x5B83;&#x4F1A;&#x76F4;&#x63A5;&#x8F93;&#x51FA;&#x5728;&#x539F;&#x672C;&#x52A0;&#x8F7D;&#x56FE;&#x7247;&#x7684;&#x5730;&#x65B9;&#x3002;
    <span class="hljs-number">2</span>. alt&#x5C5E;&#x6027;&#x6709;&#x5229;&#x4E8E;SEO&#xFF0C;&#x662F;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x641C;&#x5F55;&#x65F6;&#x5224;&#x65AD;&#x56FE;&#x7247;&#x4E0E;&#x6587;&#x5B57;&#x662F;&#x5426;&#x76F8;&#x5173;&#x7684;&#x91CD;&#x8981;&#x4F9D;&#x636E;&#x3002;
    <span class="hljs-number">3</span>. alt&#x53EA;&#x80FD;&#x662F;&#x5143;&#x7D20;&#x7684;&#x5C5E;&#x6027;&#xFF0C;&#x53EA;&#x80FD;&#x7528;&#x5728;img&#x3001;area&#x548C;input&#x6807;&#x7B7E;&#x4E2D;&#xFF08;img,area&#x4E2D;alt&#x5FC5;&#x987B;&#x6307;&#x5B9A;&#xFF09;&#x3002;     

&#x6CE8;&#xFF1A;&#x5F53;a&#x6807;&#x7B7E;&#x5185;&#x5D4C;&#x5957;img&#x6807;&#x7B7E;&#x65F6;&#xFF0C;&#x8D77;&#x4F5C;&#x7528;&#x7684;&#x662F;img&#x7684;title&#x5C5E;&#x6027;&#x3002;
</code></pre>
                                    <h5 id="15-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css-hack&#xFF1F;"><a
                                            name="15-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css-hack&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#15-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css-hack&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="15-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css-hack&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#15-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css-hack&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>15. &#x2605;
                                        &#x4EC0;&#x4E48;&#x662F;CSS hack&#xFF1F;</h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">CSS</span> <span class="hljs-selector-tag">hack</span>&#xFF1A;<span class="hljs-selector-tag">CSS</span> <span class="hljs-selector-tag">hack</span>&#x662F;&#x901A;&#x8FC7;&#x5728;<span class="hljs-selector-tag">CSS</span>&#x6837;&#x5F0F;&#x4E2D;&#x52A0;&#x5165;&#x4E00;&#x4E9B;&#x7279;&#x6B8A;&#x7684;&#x7B26;&#x53F7;&#xFF0C;&#x8BA9;&#x4E0D;&#x540C;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x8BC6;&#x522B;&#x4E0D;&#x540C;&#x7684;&#x7B26;&#x53F7;&#xFF08;&#x4EC0;&#x4E48;&#x6837;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x8BC6;&#x522B;&#x4EC0;&#x4E48;&#x6837;&#x7684;&#x7B26;&#x53F7;&#x662F;&#x6709;&#x6807;&#x51C6;&#x7684;&#xFF0C;<span class="hljs-selector-tag">CSS</span> <span class="hljs-selector-tag">hack</span>&#x5C31;&#x662F;&#x8BA9;&#x4F60;&#x8BB0;&#x4F4F;&#x8FD9;&#x4E2A;&#x6807;&#x51C6;&#xFF09;&#xFF0C;&#x4EE5;&#x8FBE;&#x5230;&#x5E94;&#x7528;&#x4E0D;&#x540C;&#x7684;<span class="hljs-selector-tag">CSS</span>&#x6837;&#x5F0F;&#x7684;&#x76EE;&#x7684;&#x3002;

&#x6CE8;&#xFF1A;<span class="hljs-selector-tag">CSS</span>&#x5C5E;&#x6027;<span class="hljs-selector-tag">Hack</span>&#x3001;<span class="hljs-selector-tag">CSS</span>&#x9009;&#x62E9;&#x7B26;<span class="hljs-selector-tag">Hack</span>&#x4EE5;&#x53CA;<span class="hljs-selector-tag">IE</span>&#x6761;&#x4EF6;&#x6CE8;&#x91CA;<span class="hljs-selector-tag">Hack</span>&#xFF0C; <span class="hljs-selector-tag">Hack</span>&#x4E3B;&#x8981;&#x9488;&#x5BF9;<span class="hljs-selector-tag">IE</span>&#x6D4F;&#x89C8;&#x5668;&#x3002;

&#x4F8B;&#xFF1A;<span class="hljs-selector-tag">margin</span>&#x5C5E;&#x6027;&#x5728;<span class="hljs-selector-tag">ie6</span>&#x4E2D;&#x663E;&#x793A;&#x7684;&#x8DDD;&#x79BB;&#x4F1A;&#x6BD4;&#x5176;&#x4ED6;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x663E;&#x793A;&#x7684;&#x8DDD;&#x79BB;&#x5BBD;2&#x500D;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;<span class="hljs-selector-tag">margin-left</span><span class="hljs-selector-pseudo">:20px</span>;&#x5728;<span class="hljs-selector-tag">ie6</span>&#x4E2D;&#x8DDD;&#x5DE6;&#x4FA7;&#x5BF9;&#x8C61;&#x7684;&#x5B9E;&#x9645;&#x663E;&#x793A;&#x8DDD;&#x79BB;&#x662F;40<span class="hljs-selector-tag">px</span>&#xFF0C;&#x800C;&#x5728;&#x975E;<span class="hljs-selector-tag">ie6</span>&#x4E2D;&#x663E;&#x793A;&#x7684;&#x8DDD;&#x5DE6;&#x4FA7;&#x5BF9;&#x8C61;&#x7684;&#x8DDD;&#x79BB;&#x662F;&#x8BBE;&#x7F6E;&#x7684;&#x503C;20<span class="hljs-selector-tag">px</span>;&#x6240;&#x4EE5;&#x8981;&#x60F3;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x8DDD;&#x79BB;&#x5DE6;&#x4FA7;&#x5BF9;&#x8C61;&#x7684;&#x8DDD;&#x79BB;&#x5728;&#x6240;&#x6709;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x90FD;&#x663E;&#x793A;&#x662F;20<span class="hljs-selector-tag">px</span>&#x7684;&#x5BBD;&#x5EA6;&#x7684;&#x6837;&#x5F0F;&#x5E94;&#x4E3A;&#xFF1A;<span class="hljs-selector-class">.kwstu</span>{<span class="hljs-attribute">margin-left</span>:<span class="hljs-number">20px</span>;<span class="hljs-attribute">_margin-left</span>:<span class="hljs-number">20px</span>;}

<span class="hljs-selector-tag">CSS</span> <span class="hljs-selector-tag">hack</span>&#x5E38;&#x89C1;&#x7684;&#x4E09;&#x79CD;&#x5F62;&#x5F0F;&#xFF1A;
    1. &#x5C5E;&#x6027;&#x7EA7;<span class="hljs-selector-tag">Hack</span>&#xFF1A;&#x6BD4;&#x5982;<span class="hljs-selector-tag">IE6</span>&#x80FD;&#x8BC6;&#x522B;&#x4E0B;&#x5212;&#x7EBF;&#x201C;_&#x201D;&#x548C;&#x661F;&#x53F7;&#x201C;*&#x201D;&#xFF0C;<span class="hljs-selector-tag">IE7</span>&#x80FD;&#x8BC6;&#x522B;&#x661F;&#x53F7;&#x201C;*&#x201D;&#xFF0C;&#x4F46;&#x4E0D;&#x80FD;&#x8BC6;&#x522B;&#x4E0B;&#x5212;&#x7EBF;&#x201D;_ &#x201D;&#xFF0C;&#x800C;<span class="hljs-selector-tag">firefox</span>&#x4E24;&#x4E2A;&#x90FD;&#x4E0D;&#x80FD;&#x8BA4;&#x8BC6;&#x3002;
    2. &#x9009;&#x62E9;&#x7B26;&#x7EA7;<span class="hljs-selector-tag">Hack</span>&#xFF1A;&#x6BD4;&#x5982;<span class="hljs-selector-tag">IE6</span>&#x80FD;&#x8BC6;&#x522B;*<span class="hljs-selector-tag">html</span> <span class="hljs-selector-class">.class</span>{}&#xFF0C;<span class="hljs-selector-tag">IE7</span>&#x80FD;&#x8BC6;&#x522B;*+<span class="hljs-selector-tag">html</span> <span class="hljs-selector-class">.class</span>{}&#x6216;&#x8005;*<span class="hljs-selector-pseudo">:first-child+html</span> <span class="hljs-selector-class">.class</span>{}&#x3002;
    3. <span class="hljs-selector-tag">IE</span>&#x6761;&#x4EF6;&#x6CE8;&#x91CA;<span class="hljs-selector-tag">Hack</span>&#xFF1A;<span class="hljs-selector-tag">IE</span>&#x6761;&#x4EF6;&#x6CE8;&#x91CA;&#x662F;&#x5FAE;&#x8F6F;<span class="hljs-selector-tag">IE5</span>&#x5F00;&#x59CB;&#x5C31;&#x63D0;&#x4F9B;&#x7684;&#x4E00;&#x79CD;&#x975E;&#x6807;&#x51C6;&#x903B;&#x8F91;&#x8BED;&#x53E5;&#x3002;&#x6BD4;&#x5982;&#x9488;&#x5BF9;&#x6240;&#x6709;<span class="hljs-selector-tag">IE</span>&#xFF1A;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-tag">-</span><span class="hljs-selector-attr">[if IE]</span>&amp;<span class="hljs-selector-tag">gt</span>;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-tag">-</span>&#x60A8;&#x7684;&#x4EE3;&#x7801;<span class="hljs-selector-tag">-</span>&amp;<span class="hljs-selector-tag">gt</span>;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-attr">[endif]</span>&amp;<span class="hljs-selector-tag">gt</span>;&#xFF0C;&#x9488;&#x5BF9;<span class="hljs-selector-tag">IE6</span>&#x53CA;&#x4EE5;&#x4E0B;&#x7248;&#x672C;&#xFF1A;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-tag">-</span><span class="hljs-selector-attr">[if it IE 7]</span>&amp;<span class="hljs-selector-tag">gt</span>;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-tag">-</span>&#x60A8;&#x7684;&#x4EE3;&#x7801;<span class="hljs-selector-tag">-</span>&amp;<span class="hljs-selector-tag">gt</span>;&amp;<span class="hljs-selector-tag">lt</span>;!<span class="hljs-selector-attr">[endif]</span><span class="hljs-selector-tag">-</span>&amp;<span class="hljs-selector-tag">gt</span>;&#xFF0C;&#x8FD9;&#x7C7B;<span class="hljs-selector-tag">Hack</span>&#x4E0D;&#x4EC5;&#x5BF9;<span class="hljs-selector-tag">CSS</span>&#x751F;&#x6548;&#xFF0C;&#x5BF9;&#x5199;&#x5728;&#x5224;&#x65AD;&#x8BED;&#x53E5;&#x91CC;&#x9762;&#x7684;&#x6240;&#x6709;&#x4EE3;&#x7801;&#x90FD;&#x4F1A;&#x751F;&#x6548;&#x3002;
    <span class="hljs-selector-tag">PS</span>&#xFF1A;&#x6761;&#x4EF6;&#x6CE8;&#x91CA;&#x53EA;&#x6709;&#x5728;<span class="hljs-selector-tag">IE</span>&#x6D4F;&#x89C8;&#x5668;&#x4E0B;&#x624D;&#x80FD;&#x6267;&#x884C;&#xFF0C;&#x8FD9;&#x4E2A;&#x4EE3;&#x7801;&#x5728;&#x975E;<span class="hljs-selector-tag">IE</span>&#x6D4F;&#x89C8;&#x4E0B;&#x88AB;&#x5F53;&#x505A;&#x6CE8;&#x91CA;&#x89C6;&#x800C;&#x4E0D;&#x89C1;&#x3002;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;<span class="hljs-selector-tag">IE</span>&#x6761;&#x4EF6;&#x6CE8;&#x91CA;&#x8F7D;&#x5165;&#x4E0D;&#x540C;&#x7684;<span class="hljs-selector-tag">CSS</span>&#x3001;<span class="hljs-selector-tag">JS</span>&#x3001;<span class="hljs-selector-tag">HTML</span>&#x548C;&#x670D;&#x52A1;&#x5668;&#x4EE3;&#x7801;&#x7B49;&#x3002;
</code></pre>
                                    <h5
                                        id="16-&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;">
                                        <a name="16-&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#16-&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="16-&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#16-&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>16. &#x2605;&#x2605;
                                        &#x4EC0;&#x4E48;&#x53EB;&#x505A;&#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x548C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x6E10;&#x8FDB;&#x589E;&#x5F3A; <span class="hljs-selector-tag">progressive</span> <span class="hljs-selector-tag">enhancement</span>&#xFF1A; 
    1. &#x9488;&#x5BF9;&#x4F4E;&#x7248;&#x672C;&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x6784;&#x5EFA;&#x9875;&#x9762;&#xFF0C;&#x4FDD;&#x8BC1;&#x6700;&#x57FA;&#x672C;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x7136;&#x540E;&#x518D;&#x9488;&#x5BF9;&#x9AD8;&#x7EA7;&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x6548;&#x679C;&#x3001;&#x4EA4;&#x4E92;&#x7B49;&#x6539;&#x8FDB;&#x548C;&#x8FFD;&#x52A0;&#x529F;&#x80FD;&#x8FBE;&#x5230;&#x66F4;&#x597D;&#x7684;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x3002;
    2. &#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#x89C2;&#x70B9;&#x5219;&#x8BA4;&#x4E3A;&#x5E94;&#x5173;&#x6CE8;&#x4E8E;&#x5185;&#x5BB9;&#x672C;&#x8EAB;&#x3002;&#x5185;&#x5BB9;&#x662F;&#x6211;&#x4EEC;&#x5EFA;&#x7ACB;&#x7F51;&#x7AD9;&#x7684;&#x8BF1;&#x56E0;&#x3002;&#x6709;&#x7684;&#x7F51;&#x7AD9;&#x5C55;&#x793A;&#x5B83;&#xFF0C;&#x6709;&#x7684;&#x5219;&#x6536;&#x96C6;&#x5B83;&#xFF0C;&#x6709;&#x7684;&#x5BFB;&#x6C42;&#xFF0C;&#x6709;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x8FD8;&#x6709;&#x7684;&#x7F51;&#x7AD9;&#x751A;&#x81F3;&#x4F1A;&#x5305;&#x542B;&#x4EE5;&#x4E0A;&#x7684;&#x79CD;&#x79CD;&#xFF0C;&#x4F46;&#x76F8;&#x540C;&#x70B9;&#x662F;&#x5B83;&#x4EEC;&#x5168;&#x90FD;&#x6D89;&#x53CA;&#x5230;&#x5185;&#x5BB9;&#x3002;&#x8FD9;&#x4F7F;&#x5F97;&#x201C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#x201D;&#x6210;&#x4E3A;&#x4E00;&#x79CD;&#x66F4;&#x4E3A;&#x5408;&#x7406;&#x7684;&#x8BBE;&#x8BA1;&#x8303;&#x4F8B;&#x3002;&#x8FD9;&#x4E5F;&#x662F;&#x5B83;&#x7ACB;&#x5373;&#x88AB; <span class="hljs-selector-tag">Yahoo</span>! &#x6240;&#x91C7;&#x7EB3;&#x5E76;&#x7528;&#x4EE5;&#x6784;&#x5EFA;&#x5176;&#x201C;&#x5206;&#x7EA7;&#x5F0F;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301; (<span class="hljs-selector-tag">Graded</span> <span class="hljs-selector-tag">Browser</span> <span class="hljs-selector-tag">Support</span>)&#x201D;&#x7B56;&#x7565;&#x7684;&#x539F;&#x56E0;&#x6240;&#x5728;&#x3002;

&#x4F18;&#x96C5;&#x964D;&#x7EA7; <span class="hljs-selector-tag">graceful</span> <span class="hljs-selector-tag">degradation</span>&#xFF1A;
    1. &#x4E00;&#x5F00;&#x59CB;&#x5C31;&#x6784;&#x5EFA;&#x5B8C;&#x6574;&#x7684;&#x529F;&#x80FD;&#xFF0C;&#x7136;&#x540E;&#x518D;&#x9488;&#x5BF9;&#x4F4E;&#x7248;&#x672C;&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x517C;&#x5BB9;&#x3002;
    2. &#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x89C2;&#x70B9;&#x8BA4;&#x4E3A;&#x5E94;&#x8BE5;&#x9488;&#x5BF9;&#x90A3;&#x4E9B;&#x6700;&#x9AD8;&#x7EA7;&#x3001;&#x6700;&#x5B8C;&#x5584;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x6765;&#x8BBE;&#x8BA1;&#x7F51;&#x7AD9;&#x3002;&#x800C;&#x5C06;&#x90A3;&#x4E9B;&#x88AB;&#x8BA4;&#x4E3A;&#x201C;&#x8FC7;&#x65F6;&#x201D;&#x6216;&#x6709;&#x529F;&#x80FD;&#x7F3A;&#x5931;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x4E0B;&#x7684;&#x6D4B;&#x8BD5;&#x5DE5;&#x4F5C;&#x5B89;&#x6392;&#x5728;&#x5F00;&#x53D1;&#x5468;&#x671F;&#x7684;&#x6700;&#x540E;&#x9636;&#x6BB5;&#xFF0C;&#x5E76;&#x628A;&#x6D4B;&#x8BD5;&#x5BF9;&#x8C61;&#x9650;&#x5B9A;&#x4E3A;&#x4E3B;&#x6D41;&#x6D4F;&#x89C8;&#x5668;&#xFF08;&#x5982; <span class="hljs-selector-tag">IE</span>&#x3001;<span class="hljs-selector-tag">Mozilla</span> &#x7B49;&#xFF09;&#x7684;&#x524D;&#x4E00;&#x4E2A;&#x7248;&#x672C;&#x3002;

&#x533A;&#x522B;&#xFF1A;
    1. &#x4F18;&#x96C5;&#x964D;&#x7EA7;&#x662F;&#x4ECE;&#x590D;&#x6742;&#x7684;&#x73B0;&#x72B6;&#x5F00;&#x59CB;&#xFF0C;&#x5E76;&#x8BD5;&#x56FE;&#x51CF;&#x5C11;&#x7528;&#x6237;&#x4F53;&#x9A8C;&#x7684;&#x4F9B;&#x7ED9;
    2. &#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#x5219;&#x662F;&#x4ECE;&#x4E00;&#x4E2A;&#x975E;&#x5E38;&#x57FA;&#x7840;&#x7684;&#xFF0C;&#x80FD;&#x591F;&#x8D77;&#x4F5C;&#x7528;&#x7684;&#x7248;&#x672C;&#x5F00;&#x59CB;&#xFF0C;&#x5E76;&#x4E0D;&#x65AD;&#x6269;&#x5145;&#xFF0C;&#x4EE5;&#x9002;&#x5E94;&#x672A;&#x6765;&#x73AF;&#x5883;&#x7684;&#x9700;&#x8981;
    3. &#x964D;&#x7EA7;&#xFF08;&#x529F;&#x80FD;&#x8870;&#x51CF;&#xFF09;&#x610F;&#x5473;&#x7740;&#x5F80;&#x56DE;&#x770B;&#xFF1B;&#x800C;&#x6E10;&#x8FDB;&#x589E;&#x5F3A;&#x5219;&#x610F;&#x5473;&#x7740;&#x671D;&#x524D;&#x770B;&#xFF0C;&#x540C;&#x65F6;&#x4FDD;&#x8BC1;&#x5176;&#x6839;&#x57FA;&#x5904;&#x4E8E;&#x5B89;&#x5168;&#x5730;&#x5E26;
</code></pre>
                                    <h5
                                        id="17-&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;">
                                        <a name="17-&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#17-&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="17-&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#17-&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>17.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x79FB;&#x52A8;&#x7AEF;&#x9002;&#x914D;&#x600E;&#x4E48;&#x505A;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x65B9;&#x6CD5;&#x4E00;&#xFF1A;@<span class="hljs-keyword">media</span> &#x5A92;&#x4F53;&#x67E5;&#x8BE2;&#xFF0C;&#x901A;&#x8FC7;&#x67E5;&#x8BE2;&#x8BBE;&#x5907;&#x7684;&#x5BBD;&#x5EA6;&#x6765;&#x6267;&#x884C;&#x4E0D;&#x540C;&#x7684; css &#x4EE3;&#x7801;&#xFF0C;&#x6700;&#x7EC8;&#x8FBE;&#x5230;&#x754C;&#x9762;&#x7684;&#x914D;&#x7F6E;&#x3002;

&#x65B9;&#x6CD5;&#x4E8C;&#xFF1A;Flex&#x5F39;&#x6027;&#x5E03;&#x5C40;

&#x65B9;&#x6CD5;&#x4E09;&#xFF1A;rem + viewport &#x7F29;&#x653E;&#xFF0C;&#x5C4F;&#x5E55;&#x5BBD;&#x5EA6;&#x8BBE;&#x5B9A; rem &#x503C;&#xFF0C;&#x9700;&#x8981;&#x9002;&#x914D;&#x7684;&#x5143;&#x7D20;&#x90FD;&#x4F7F;&#x7528; rem &#x4E3A;&#x5355;&#x4F4D;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x9002;&#x914D;&#x7684;&#x5143;&#x7D20;&#x8FD8;&#x662F;&#x4F7F;&#x7528; px &#x4E3A;&#x5355;&#x4F4D;&#x3002;
</code></pre>
                                    <h5
                                        id="18-&#x2605;&#x2605;-&#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;">
                                        <a name="18-&#x2605;&#x2605;-&#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#18-&#x2605;&#x2605;-&#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="18-&#x2605;&#x2605;-&#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#18-&#x2605;&#x2605;-&#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>18. &#x2605;&#x2605;
                                        &#x8BF7;&#x95EE;&#x82F9;&#x679C;&#x539F;&#x751F;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6E05;&#x9664;&#xFF0C;&#x4F8B;&#x5982;button&#xFF0C;input&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x6E05;&#x9664;&#x82F9;&#x679C;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1A; <span class="hljs-selector-tag">css</span>&#x6837;&#x5F0F;&#x4E2D;&#x52A0;&#x5165; <span class="hljs-selector-tag">input</span>,<span class="hljs-selector-tag">textarea</span>,<span class="hljs-selector-tag">button</span> { <span class="hljs-attribute">-webkit-appearance</span>: none; <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">0px</span>; <span class="hljs-attribute">border</span>:none;}

<span class="hljs-selector-tag">input</span>&#x3001;<span class="hljs-selector-tag">button</span>&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF1A; <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=&quot;button&quot;]</span>, <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=&quot;submit&quot;]</span>, <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type=&quot;reset&quot;]</span> {<span class="hljs-attribute">-webkit-appearance</span>: none;}
</code></pre>
                                    <h5
                                        id="19-&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;">
                                        <a name="19-&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#19-&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="19-&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;"
                                            class="plugin-anchor"
                                            href="#19-&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>19. &#x2605;
                                        CSS&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x6CD5;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">1. &#x5728;&#x6807;&#x7B7E;&#x5C3E;&#x90E8;&#x6DFB;&#x52A0;&#x7A7A;&#x5757;&#x7EA7;&#x6807;&#x7B7E;&#xFF0C;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;&#x5C5E;&#x6027;&#x4E3A;&#xFF1A;<span class="hljs-selector-tag">clear</span>&#xFF1A;<span class="hljs-selector-tag">both</span>&#xFF1B;&#x7F3A;&#x70B9;&#xFF1A;&#x5982;&#x679C;&#x9875;&#x9762;&#x6D6E;&#x52A8;&#x5E03;&#x5C40;&#x591A;&#xFF0C;&#x5C31;&#x8981;&#x589E;&#x52A0;&#x5F88;&#x591A;&#x7A7A;<span class="hljs-selector-tag">div</span>&#xFF0C;&#x4E0D;&#x5229;&#x4E8E;&#x9875;&#x9762;&#x7684;&#x4F18;&#x5316;&#x3002;
2. &#x7236;&#x7EA7;&#x5B9A;&#x4E49;&#x4F2A;&#x7C7B;<span class="hljs-selector-tag">after</span>&#x548C;<span class="hljs-selector-tag">zoom</span>&#xFF0C;<span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:after</span>{<span class="hljs-attribute">display</span>:block; <span class="hljs-attribute">clear</span>:both; <span class="hljs-attribute">content</span>:<span class="hljs-string">&quot;&quot;</span>; <span class="hljs-attribute">visibility</span>:hidden; <span class="hljs-attribute">height</span>:<span class="hljs-number">0</span>;}  <span class="hljs-selector-class">.box</span>{ <span class="hljs-attribute">zoom</span>: <span class="hljs-number">1</span> }
3. &#x7B80;&#x5355;&#x7C97;&#x66B4;&#xFF0C;&#x7236;&#x7EA7;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">overflow</span><span class="hljs-selector-pseudo">:hidden</span>&#xFF0C;&#x7F3A;&#x70B9;&#x662F;&#x4E0D;&#x80FD;&#x548C;<span class="hljs-selector-tag">position</span>&#x914D;&#x5408;&#x4F7F;&#x7528;
4. &#x76F4;&#x63A5;&#x7ED9;&#x7236;&#x5143;&#x7D20;&#x5355;&#x72EC;&#x8BBE;&#x7F6E;&#x9AD8;&#x5EA6;&#xFF08;<span class="hljs-selector-tag">height</span>&#xFF09;&#xFF1B;&#x7F3A;&#x70B9;&#xFF1A;&#x53EA;&#x9002;&#x5408;&#x9AD8;&#x5EA6;&#x56FA;&#x5B9A;&#x7684;&#x5E03;&#x5C40;&#xFF0C;&#x8981;&#x7ED9;&#x51FA;&#x7CBE;&#x786E;&#x7684;&#x9AD8;&#x5EA6;&#xFF0C;&#x5982;&#x679C;&#x9AD8;&#x5EA6;&#x548C;&#x7236;&#x7EA7;<span class="hljs-selector-tag">div</span>&#x4E0D;&#x4E00;&#x6837;&#x65F6;&#xFF0C;&#x4F1A;&#x4EA7;&#x751F;&#x95EE;&#x9898;&#x3002;&#x5BF9;&#x4E8E;&#x54CD;&#x5E94;&#x5F0F;&#x5E03;&#x5C40;&#x4F1A;&#x6709;&#x5F88;&#x5927;&#x5F71;&#x54CD;&#x3002;
</code></pre>
                                    <h5
                                        id="20-&#x2605;&#x2605;-pc&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;">
                                        <a name="20-&#x2605;&#x2605;-pc&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#20-&#x2605;&#x2605;-pc&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="20-&#x2605;&#x2605;-pc&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;"
                                            class="plugin-anchor"
                                            href="#20-&#x2605;&#x2605;-pc&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>20. &#x2605;&#x2605;
                                        PC&#x7AEF;&#x5E38;&#x7528;&#x7684;&#x5E03;&#x5C40;&#x65B9;&#x6CD5;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">1&#x3001;&#x5229;&#x7528;<span class="hljs-selector-tag">float</span>+<span class="hljs-selector-tag">overflow</span>&#x5B9E;&#x73B0;
    &#x5DE6;&#x53F3;&#x5B9A;&#x5BBD;&#x5EA6;&#xFF0C;&#x5206;&#x5E03;&#x5411;&#x4E24;&#x8FB9;&#x6D6E;&#x52A8;&#xFF0C;&#x4E2D;&#x95F4;&#x5982;&#x679C;&#x6CA1;&#x8BBE;&#x7F6E;&#x6EA2;&#x51FA;&#x5904;&#x7406;&#x9ED8;&#x8BA4;&#x5BBD;&#x5EA6;&#x662F;100%&#xFF0C;&#x8BBE;&#x7F6E;&#x540E;&#x5C31;&#x4F1A;&#x622A;&#x53D6;&#x4E24;&#x8FB9;&#x7684;&#x5BBD;&#x5EA6;&#x4ECE;&#x800C;&#x5B9E;&#x73B0;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;
2&#x3001;<span class="hljs-selector-tag">flex</span>&#x5E03;&#x5C40;
    &#x901A;&#x8FC7;<span class="hljs-selector-tag">flex</span>&#x76F8;&#x5173;&#x7684;&#x5C5E;&#x6027;&#x8FDB;&#x884C;&#x9002;&#x914D;&#x6027;&#x7684;&#x8C03;&#x6574;&#x5E03;&#x5C40;
3&#x3001;<span class="hljs-selector-tag">Table</span>&#x8868;&#x683C;&#x5E03;&#x5C40;
4&#x3001;<span class="hljs-selector-tag">float</span>+<span class="hljs-selector-tag">margin</span>&#x5B9E;&#x73B0;&#x4E09;&#x5217;&#x5E03;&#x5C40;
5&#x3001;&#x5B9A;&#x4F4D;<span class="hljs-selector-tag">absolute</span>&#x5B9E;&#x73B0;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;
6&#x3001;<span class="hljs-selector-tag">Grid</span>&#x7F51;&#x683C;&#x5E03;&#x5C40;
7&#x3001;&#x5723;&#x676F;&#x5E03;&#x5C40;
8&#x3001;&#x53CC;&#x98DE;&#x7FFC;&#x5E03;&#x5C40;
9&#x3001;&#x7B49;&#x9AD8;&#x5E03;&#x5C40;
</code></pre>
                                    <h5
                                        id="21-&#x2605;&#x2605;-&#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;">
                                        <a name="21-&#x2605;&#x2605;-&#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#21-&#x2605;&#x2605;-&#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="21-&#x2605;&#x2605;-&#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;"
                                            class="plugin-anchor"
                                            href="#21-&#x2605;&#x2605;-&#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>21. &#x2605;&#x2605;
                                        &#x5E03;&#x5C40;&#x5DE6;&#x8FB9;20%&#xFF0C;&#x4E2D;&#x95F4;&#x81EA;&#x9002;&#x5E94;&#xFF0C;&#x53F3;&#x8FB9;200px&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5B9A;&#x4F4D;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">&#x5E03;&#x5C40;&#xFF1A; &lt;div class=&quot;box&quot;&gt;
        &lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;
        &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
        &lt;div class=&quot;content&quot;&gt;content&lt;/div&gt;
      &lt;/div&gt;

&#x6837;&#x5F0F;&#xFF1A;*,html,body{
          margin: 0;
          padding: 0;
        }
        .box{
          width: 1500px;
          height: 500px;
          background-color: rgb(215, 221, 221);
          margin: 0 auto;
        }
        .left{
          width: 20%;
          height: 200px;
          background-color: chocolate;
          float: left;
        }
        .right{
          width: 200px;
          height: 200px;
          float: right;
          background-color: cornflowerblue;
        }
        .content{
          overflow: hidden;
          height: 400px;
          background-color: darkblue;
        }
</code></pre>
                                    <h5
                                        id="22-&#x2605;&#x2605;-&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;">
                                        <a name="22-&#x2605;&#x2605;-&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#22-&#x2605;&#x2605;-&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="22-&#x2605;&#x2605;-&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#22-&#x2605;&#x2605;-&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>22. &#x2605;&#x2605;
                                        &#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;img&#x7B97;&#x4EC0;&#x4E48;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#x600E;&#x4E48;&#x8F6C;&#x5316;&#x4E3A;&#x5757;&#x5143;&#x7D20;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1A;1.&#x65E0;&#x6CD5;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#xFF1B;
        2. &#x5BF9;margin&#x4EC5;&#x8BBE;&#x7F6E;&#x5DE6;&#x53F3;&#x6709;&#x6548;&#xFF0C;&#x4E0A;&#x4E0B;&#x65E0;&#x6548;&#xFF1B;
        3. padding&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;&#x6709;&#x6548;&#xFF1B;&#x4E0D;&#x4F1A;&#x81EA;&#x52A8;&#x6362;&#x884C;
&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1A;1.&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;
        2. margin&#x548C;padding&#x7684;&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;&#x5747;&#x5BF9;&#x5176;&#x6709;&#x6548;
        3. &#x8D85;&#x51FA;&#x5F53;&#x524D;&#x884C;&#x4F1A;&#x81EA;&#x52A8;&#x6362;&#x884C;
        4. &#x591A;&#x4E2A;&#x5757;&#x72B6;&#x5143;&#x7D20;&#x6807;&#x7B7E;&#x5199;&#x5728;&#x4E00;&#x8D77;&#xFF0C;&#x9ED8;&#x8BA4;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x4E3A;&#x4ECE;&#x4E0A;&#x81F3;&#x4E0B;
img&#xFF1A;&#x5C5E;&#x4E8E;&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;(inline-block),&#x5373;&#x6709;&#x884C;&#x5185;&#x5143;&#x7D20;&#x7684;&#x5C5E;&#x6027;&#x4E5F;&#x6709;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5C5E;&#x6027;

&#x5143;&#x7D20;&#x4E4B;&#x95F4;&#x7684;&#x8F6C;&#x5316;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x8BBE;&#x7F6E;&#x6837;&#x5F0F;&#xFF1A;display:block/inline/inline-block&#x6765;&#x6539;&#x53D8;&#x81EA;&#x8EAB;&#x7684;&#x5143;&#x7D20;&#x5C5E;&#x6027;
</code></pre>
                                    <h5
                                        id="23-&#x2605;&#x2605;-&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;-&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;">
                                        <a name="23-&#x2605;&#x2605;-&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;-&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#23-&#x2605;&#x2605;-&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;-&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="23-&#x2605;&#x2605;-&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;-&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#23-&#x2605;&#x2605;-&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;-&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>23. &#x2605;&#x2605;
                                        &#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;?
                                        &#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5C06;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x4E3A;&#x540C;&#x4E00;&#x884C;&#xFF1A;1. &#x6D6E;&#x52A8;(float) 2.&#x884C;&#x5185;&#x5143;&#x7D20;/&#x884C;&#x5185;&#x5757;&#x5143;&#x7D20;  
&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1A;&#x8BE6;&#x89C1; 19
</code></pre>
                                    <h5
                                        id="24-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css3-transform-animation-&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="24-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css3-transform-animation-&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#24-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css3-transform-animation-&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="24-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css3-transform-animation-&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#24-&#x2605;-&#x4EC0;&#x4E48;&#x662F;css3-transform-animation-&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>24. &#x2605;
                                        &#x4EC0;&#x4E48;&#x662F;CSS3 transform? animation?
                                        &#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">transform</span>&#xFF1A;1. <span class="hljs-selector-tag">transform</span> &#x5C5E;&#x6027;&#x5411;&#x5143;&#x7D20;&#x5E94;&#x7528; 2<span class="hljs-selector-tag">D</span> &#x6216; 3<span class="hljs-selector-tag">D</span> &#x8F6C;&#x6362;&#x3002;&#x8BE5;&#x5C5E;&#x6027;&#x5141;&#x8BB8;&#x6211;&#x4EEC;&#x5BF9;&#x5143;&#x7D20;&#x8FDB;&#x884C;&#x65CB;&#x8F6C;&#x3001;&#x7F29;&#x653E;&#x3001;&#x79FB;&#x52A8;&#x6216;&#x503E;&#x659C;&#x3002;
          2. <span class="hljs-selector-tag">transform</span>&#x5C5E;&#x6027;&#x662F;&#x9759;&#x6001;&#x5C5E;&#x6027;&#xFF0C;&#x9700;&#x8981;&#x914D;&#x5408;<span class="hljs-selector-tag">transition</span>&#x548C;<span class="hljs-selector-tag">animation</span>&#x624D;&#x80FD;&#x5C55;&#x73B0;&#x51FA;&#x52A8;&#x753B;&#x6548;&#x679C;&#x3002;&#x4F60;&#x53EF;&#x4EE5;&#x628A;&#x5B83;&#x770B;&#x6210;&#x662F;&#x8DDF;<span class="hljs-selector-tag">left</span>&#x3001;<span class="hljs-selector-tag">top</span>&#x7B49;&#x5C5E;&#x6027;&#x4E00;&#x6837;&#xFF0C;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x9759;&#x6001;&#x6837;&#x5F0F;&#x800C;&#x5DF2;&#x3002;

<span class="hljs-selector-tag">animation</span>&#xFF1A;&#x4E00;&#x4E2A;<span class="hljs-selector-tag">css3</span>&#x7684;&#x52A8;&#x753B;&#x5C5E;&#x6027;&#xFF0C;&#x9700;&#x8981;&#x914D;&#x5408;@<span class="hljs-keyword">keyframes</span> &#x4F7F;&#x7528;

&#x533A;&#x522B;&#xFF1A; <span class="hljs-number">1</span>. transition&#x662F;css&#x4E2D;&#x68C0;&#x6D4B;&#x6307;&#x5B9A;&#x5C5E;&#x6027;&#x53D8;&#x5316;&#x8FDB;&#x884C;&#x81EA;&#x52A8;&#x8865;&#x95F4;&#x52A8;&#x753B;&#x7684;&#x5C5E;&#x6027;&#x3002;
      <span class="hljs-number">2</span>. animate&#x662F;&#x5148;&#x6307;&#x5B9A;&#x597D;&#x52A8;&#x753B;&#x8FC7;&#x7A0B;&#x4E2D;&#x7684;&#x5173;&#x952E;&#x5E27;&#x5C5E;&#x6027;&#xFF0C;&#x8FDB;&#x884C;&#x52A8;&#x753B;&#x7684;&#x5C5E;&#x6027;&#x3002;
</code></pre>
                                    <h5
                                        id="25-&#x2605;&#x2605;-nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="25-&#x2605;&#x2605;-nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#25-&#x2605;&#x2605;-nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="25-&#x2605;&#x2605;-nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#25-&#x2605;&#x2605;-nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>25. &#x2605;&#x2605;
                                        nth-of-type&#x548C;nth-child&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">nth-of-type&#xFF1A;&#x8BE5;css&#x4F2A;&#x7C7B;&#x662F;&#x9488;&#x5BF9;&#x5177;&#x6709;&#x4E00;&#x7EC4;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#x7684;&#x6807;&#x7B7E;, &#x7528; n &#x6765;&#x7B5B;&#x9009;&#x51FA;&#x5728;&#x4E00;&#x7EC4;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#x7684;&#x4F4D;&#x7F6E;&#x3002;

nth-child&#xFF1A;&#x8BE5;css&#x4F2A;&#x7C7B;&#x9996;&#x5148;&#x662F;&#x627E;&#x5230;&#x6240;&#x6709;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#xFF0C;, &#x7528; n &#x6765;&#x7B5B;&#x9009;&#x51FA;&#x5728;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#x8282;&#x70B9;&#x7684;&#x4F4D;&#x7F6E;&#x3002;

&#x603B;&#x7684;&#x6765;&#x8BF4;&#x5C31;&#x662F;&#xFF0C;nth-of-type &#x5B83;&#x662F;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#x7684;&#x7B2C;n&#x4E2A;&#xFF0C;&#x800C;nth-child &#x662F;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#x7684;&#x7B2C;n&#x4E2A;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x3002;

&#x4F8B;&#xFF1A;
      &lt;p&gt;&#x7B2C;&#x4E00;&#x4E2A;&lt;/p&gt;
      &lt;p&gt;&#x7B2C;&#x4E8C;&#x4E2A;&lt;/p&gt;
      &lt;h1&gt;&#x7B2C;&#x4E09;&#x4E2A;&lt;/h1&gt;
      &lt;p&gt;&#x7B2C;&#x56DB;&#x4E2A;&lt;/p&gt;
      &lt;p&gt;&#x7B2C;&#x4E94;&#x4E2A;&lt;/p&gt;

     p:nth-child(4){
      color: red;     //&#x9009;&#x4E2D;&#x7684;&#x662F; &#x2018;&#x7B2C;&#x56DB;&#x4E2A;&#x2019; &#x5185;&#x5BB9;&#x7684; p &#x6807;&#x7B7E;
    }

    p:nth-of-type(4){
      color: yellow;  //&#x9009;&#x4E2D;&#x7684;&#x662F; &#x2018;&#x7B2C;&#x4E94;&#x4E2A;&#x2019; &#x5185;&#x5BB9;&#x7684; p &#x6807;&#x7B7E;
    }
</code></pre>
                                    <h5
                                        id="26-&#x2605;&#x2605;-before-&#x548C;-before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="26-&#x2605;&#x2605;-before-&#x548C;-before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#26-&#x2605;&#x2605;-before-&#x548C;-before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="26-&#x2605;&#x2605;-before-&#x548C;-before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#26-&#x2605;&#x2605;-before-&#x548C;-before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>26. &#x2605;&#x2605;
                                        :before &#x548C; ::before&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x533A;&#x522B;&#xFF1A;
    1. &#x53EB;&#x6CD5;&#x4E0D;&#x540C;&#xFF1A;&#x4E00;&#x4E2A;&#x662F;&#x4F2A;&#x7C7B;&#xFF0C;&#x4E00;&#x4E2A;&#x662F;&#x4F2A;&#x5143;&#x7D20;
    2. &#x7248;&#x672C;&#x4E0D;&#x540C;&#xFF1A;&#x4F5C;&#x7528;&#x90FD;&#x662F;&#x4E00;&#x6837;&#xFF0C;&#x4F46;&#x5355;&#x5192;&#x53F7;&#x4F2A;&#x7C7B;&#x5199;&#x6CD5;&#x662F;&#x65E7;&#x7248;&#x672C;<span class="hljs-selector-tag">css2</span>&#x5199;&#x6CD5;&#xFF0C; &#x53CC;&#x5192;&#x53F7;&#x4F2A;&#x5143;&#x7D20;&#x662F;&#x65B0;&#x7248;&#x672C;<span class="hljs-selector-tag">css3</span>&#x5199;&#x6CD5;
    3. &#x517C;&#x5BB9;&#x6027;&#x5DEE;&#x5F02;&#xFF1A;&#x5355;&#x5192;&#x53F7;&#x4F2A;&#x7C7B;&#x5199;&#x6CD5; &#x517C;&#x5BB9;&#x6027;&#x6BD4; &#x53CC;&#x5192;&#x53F7;&#x8981;&#x597D;&#x3002; <span class="hljs-selector-pseudo">:before</span> &gt; <span class="hljs-selector-pseudo">::before</span>
</code></pre>
                                    <h5
                                        id="27-&#x2605;&#x2605;-&#x7B80;&#x8FF0;-viewport-&#x6240;&#x6709;&#x5C5E;&#x6027;">
                                        <a name="27-&#x2605;&#x2605;-&#x7B80;&#x8FF0;-viewport-&#x6240;&#x6709;&#x5C5E;&#x6027;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#27-&#x2605;&#x2605;-&#x7B80;&#x8FF0;-viewport-&#x6240;&#x6709;&#x5C5E;&#x6027;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="27-&#x2605;&#x2605;-&#x7B80;&#x8FF0;-viewport-&#x6240;&#x6709;&#x5C5E;&#x6027;"
                                            class="plugin-anchor"
                                            href="#27-&#x2605;&#x2605;-&#x7B80;&#x8FF0;-viewport-&#x6240;&#x6709;&#x5C5E;&#x6027;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>27. &#x2605;&#x2605;
                                        &#x7B80;&#x8FF0; viewport &#x6240;&#x6709;&#x5C5E;&#x6027;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">width</span>&#xFF1A;&#x63A7;&#x5236; <span class="hljs-selector-tag">viewport</span> &#x7684;&#x5927;&#x5C0F;&#xFF0C;&#x53EF;&#x4EE5;&#x6307;&#x5B9A;&#x7684;&#x4E00;&#x4E2A;&#x503C;&#xFF0C;&#x5982; 600&#xFF0C;&#x6216;&#x8005;&#x7279;&#x6B8A;&#x7684;&#x503C;&#xFF0C;&#x5982; <span class="hljs-selector-tag">device-width</span> &#x4E3A;&#x8BBE;&#x5907;&#x7684;&#x5BBD;&#x5EA6;&#xFF08;&#x5355;&#x4F4D;&#x4E3A;&#x7F29;&#x653E;&#x4E3A; 100% &#x65F6;&#x7684; <span class="hljs-selector-tag">CSS</span> &#x7684;&#x50CF;&#x7D20;&#xFF09;&#x3002;

<span class="hljs-selector-tag">height</span>&#xFF1A;&#x548C; <span class="hljs-selector-tag">width</span> &#x76F8;&#x5BF9;&#x5E94;&#xFF0C;&#x6307;&#x5B9A;&#x9AD8;&#x5EA6;&#x3002;

<span class="hljs-selector-tag">initial-scale</span>&#xFF1A;&#x521D;&#x59CB;&#x7F29;&#x653E;&#x6BD4;&#x4F8B;&#xFF0C;&#x4E5F;&#x5373;&#x662F;&#x5F53;&#x9875;&#x9762;&#x7B2C;&#x4E00;&#x6B21; <span class="hljs-selector-tag">load</span> &#x7684;&#x65F6;&#x5019;&#x7F29;&#x653E;&#x6BD4;&#x4F8B;&#xFF08;&#x8C03;&#x6574;&#x9875;&#x9762;&#x7F29;&#x653E;&#x6BD4;&#x4F8B;&#xFF09;&#x3002;

<span class="hljs-selector-tag">maximum-scale</span>&#xFF1A;&#x5141;&#x8BB8;&#x7528;&#x6237;&#x7F29;&#x653E;&#x5230;&#x7684;&#x6700;&#x5927;&#x6BD4;&#x4F8B;&#x3002;

<span class="hljs-selector-tag">minimum-scale</span>&#xFF1A;&#x5141;&#x8BB8;&#x7528;&#x6237;&#x7F29;&#x653E;&#x5230;&#x7684;&#x6700;&#x5C0F;&#x6BD4;&#x4F8B;&#x3002;

<span class="hljs-selector-tag">user-scalable</span>&#xFF1A;&#x7528;&#x6237;&#x662F;&#x5426;&#x53EF;&#x4EE5;&#x624B;&#x52A8;&#x7F29;&#x653E;
</code></pre>
                                    <h5
                                        id="28-&#x2605;-&#x5982;&#x4F55;&#x7406;&#x89E3;html&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;">
                                        <a name="28-&#x2605;-&#x5982;&#x4F55;&#x7406;&#x89E3;html&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#28-&#x2605;-&#x5982;&#x4F55;&#x7406;&#x89E3;html&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="28-&#x2605;-&#x5982;&#x4F55;&#x7406;&#x89E3;html&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#28-&#x2605;-&#x5982;&#x4F55;&#x7406;&#x89E3;html&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>28. &#x2605;
                                        &#x5982;&#x4F55;&#x7406;&#x89E3;HTML&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x8BED;&#x4E49;&#x5316;&#xFF1A;
    a. &#x4E3A;&#x4E86;&#x5728;&#x6CA1;&#x6709;CSS&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x9875;&#x9762;&#x4E5F;&#x80FD;&#x5448;&#x73B0;&#x51FA;&#x5F88;&#x597D;&#x5730;&#x5185;&#x5BB9;&#x7ED3;&#x6784;&#x3001;&#x4EE3;&#x7801;&#x7ED3;&#x6784;:&#x4E3A;&#x4E86;&#x88F8;&#x5954;&#x65F6;&#x597D;&#x770B;&#xFF1B;

    b. &#x7528;&#x6237;&#x4F53;&#x9A8C;&#xFF1A;&#x4F8B;&#x5982;title&#x3001;alt&#x7528;&#x4E8E;&#x89E3;&#x91CA;&#x540D;&#x8BCD;&#x6216;&#x89E3;&#x91CA;&#x56FE;&#x7247;&#x4FE1;&#x606F;&#x7684;&#x6807;&#x7B7E;&#x5C3D;&#x91CF;&#x586B;&#x5199;&#x6709;&#x542B;&#x4E49;&#x7684;&#x8BCD;&#x8BED;&#x3001;label&#x6807;&#x7B7E;&#x7684;&#x6D3B;&#x7528;&#xFF1B;

    c. &#x6709;&#x5229;&#x4E8E;SEO&#xFF1A;&#x548C;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x5EFA;&#x7ACB;&#x826F;&#x597D;&#x6C9F;&#x901A;&#xFF0C;&#x6709;&#x52A9;&#x4E8E;&#x722C;&#x866B;&#x6293;&#x53D6;&#x66F4;&#x591A;&#x7684;&#x6709;&#x6548;&#x4FE1;&#x606F;&#xFF1A;&#x722C;&#x866B;&#x4F9D;&#x8D56;&#x4E8E;&#x6807;&#x7B7E;&#x6765;&#x786E;&#x5B9A;&#x4E0A;&#x4E0B;&#x6587;&#x548C;&#x5404;&#x4E2A;&#x5173;&#x952E;&#x5B57;&#x7684;&#x6743;&#x91CD;&#xFF1B;

    d. &#x65B9;&#x4FBF;&#x5176;&#x4ED6;&#x8BBE;&#x5907;&#x89E3;&#x6790;&#xFF08;&#x5982;&#x5C4F;&#x5E55;&#x9605;&#x8BFB;&#x5668;&#x3001;&#x76F2;&#x4EBA;&#x9605;&#x8BFB;&#x5668;&#x3001;&#x79FB;&#x52A8;&#x8BBE;&#x5907;&#xFF09;&#x4EE5;&#x6709;&#x610F;&#x4E49;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x6E32;&#x67D3;&#x7F51;&#x9875;&#xFF1B;

    e. &#x4FBF;&#x4E8E;&#x56E2;&#x961F;&#x5F00;&#x53D1;&#x548C;&#x7EF4;&#x62A4;&#xFF0C;&#x8BED;&#x4E49;&#x5316;&#x66F4;&#x5177;&#x53EF;&#x8BFB;&#x6027;&#xFF0C;&#x9075;&#x5FAA;W3C&#x6807;&#x51C6;&#x7684;&#x56E2;&#x961F;&#x90FD;&#x9075;&#x5FAA;&#x8FD9;&#x4E2A;&#x6807;&#x51C6;&#xFF0C;&#x53EF;&#x4EE5;&#x51CF;&#x5C11;&#x5DEE;&#x5F02;&#x5316;&#x3002;

&#x5199;&#x4EE3;&#x7801;&#x65F6;&#x8981;&#x6CE8;&#x610F;&#x4EC0;&#x4E48;&#xFF1A;
    1.  &#x5C3D;&#x53EF;&#x80FD;&#x5C11;&#x7684;&#x4F7F;&#x7528;&#x65E0;&#x8BED;&#x4E49;&#x7684;&#x6807;&#x7B7E;div&#x548C;span&#xFF1B;

    2.  &#x5728;&#x8BED;&#x4E49;&#x4E0D;&#x660E;&#x663E;&#x65F6;&#xFF0C;&#x65E2;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;div&#x6216;&#x8005;p&#x65F6;&#xFF0C;&#x5C3D;&#x91CF;&#x7528;p, &#x56E0;&#x4E3A;p&#x5728;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#x6709;&#x4E0A;&#x4E0B;&#x95F4;&#x8DDD;&#xFF0C;&#x5BF9;&#x517C;&#x5BB9;&#x7279;&#x6B8A;&#x7EC8;&#x7AEF;&#x6709;&#x5229;&#xFF1B;

    3.  &#x4E0D;&#x8981;&#x4F7F;&#x7528;&#x7EAF;&#x6837;&#x5F0F;&#x6807;&#x7B7E;&#xFF0C;&#x5982;&#xFF1A;b&#x3001;font&#x3001;u&#x7B49;&#xFF0C;&#x6539;&#x7528;css&#x8BBE;&#x7F6E;&#x3002;

    4.  &#x9700;&#x8981;&#x5F3A;&#x8C03;&#x7684;&#x6587;&#x672C;&#xFF0C;&#x53EF;&#x4EE5;&#x5305;&#x542B;&#x5728;strong&#x6216;em&#x6807;&#x7B7E;&#x4E2D;&#xFF0C;strong&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x662F;&#x52A0;&#x7C97;&#xFF08;&#x4E0D;&#x8981;&#x7528;b&#xFF09;&#xFF0C;em&#x662F;&#x659C;&#x4F53;&#xFF08;&#x4E0D;&#x8981;&#x7528;i&#xFF09;&#xFF1B;

    5.  &#x4F7F;&#x7528;&#x8868;&#x683C;&#x65F6;&#xFF0C;&#x6807;&#x9898;&#x8981;&#x7528;caption&#xFF0C;&#x8868;&#x5934;&#x7528;thead&#xFF0C;&#x4E3B;&#x4F53;&#x90E8;&#x5206;&#x7528;tbody&#x5305;&#x56F4;&#xFF0C;&#x5C3E;&#x90E8;&#x7528;tfoot&#x5305;&#x56F4;&#x3002;&#x8868;&#x5934;&#x548C;&#x4E00;&#x822C;&#x5355;&#x5143;&#x683C;&#x8981;&#x533A;&#x5206;&#x5F00;&#xFF0C;&#x8868;&#x5934;&#x7528;th&#xFF0C;&#x5355;&#x5143;&#x683C;&#x7528;td&#xFF1B;

    6.&#x8868;&#x5355;&#x57DF;&#x8981;&#x7528;fieldset&#x6807;&#x7B7E;&#x5305;&#x8D77;&#x6765;&#xFF0C;&#x5E76;&#x7528;legend&#x6807;&#x7B7E;&#x8BF4;&#x660E;&#x8868;&#x5355;&#x7684;&#x7528;&#x9014;&#xFF1B;demo

    7.&#x6BCF;&#x4E2A;input&#x6807;&#x7B7E;&#x5BF9;&#x5E94;&#x7684;&#x8BF4;&#x660E;&#x6587;&#x672C;&#x90FD;&#x9700;&#x8981;&#x4F7F;&#x7528;label&#x6807;&#x7B7E;&#xFF0C;&#x5E76;&#x4E14;&#x901A;&#x8FC7;&#x4E3A;input&#x8BBE;&#x7F6E;id&#x5C5E;&#x6027;&#xFF0C;&#x5728;lable&#x6807;&#x7B7E;&#x4E2D;&#x8BBE;&#x7F6E;for=someld&#x6765;&#x8BA9;&#x8BF4;&#x660E;&#x6587;&#x672C;&#x548C;&#x76F8;&#x5BF9;&#x5E94;&#x7684;input&#x5173;&#x8054;&#x8D77;&#x6765;&#x3002;

    8.&#x8865;&#x5145;&#x4E00;&#x70B9;&#xFF1A;&#x4E0D;&#x4EC5;&#x5199;html&#x7ED3;&#x6784;&#x65F6;&#xFF0C;&#x8981;&#x7528;&#x8BED;&#x4E49;&#x5316;&#x6807;&#x7B7E;&#xFF0C;&#x7ED9;&#x5143;&#x7D20;&#x5199;css&#x7C7B;&#x540D;&#x65F6;&#xFF0C;&#x4E5F;&#x8981;&#x9075;&#x5FAA;&#x8BED;&#x4E49;&#x5316;&#x539F;&#x5219;&#xFF0C;&#x4E0D;&#x8981;&#xFF0C;&#x968F;&#x4FBF;&#x8D77;&#x4E2A;&#x540D;&#x5B57;&#x5C31;&#x7528;&#xFF0C;&#x90A3;&#x6837;&#x7B49;&#x4EE5;&#x540E;&#xFF0C;&#x518D;&#x91CD;&#x6784;&#x65F6;&#xFF0C;&#x975E;&#x5E38;&#x96BE;&#x8BFB;&#x3002;&#x6700;&#x5FCC;&#x8BB3;&#x7684;&#x662F;&#x4E0D;&#x4F1A;&#x82F1;&#x6587;&#xFF0C;&#x7528;&#x6C49;&#x8BED;&#x62FC;&#x97F3;&#x4EE3;&#x66FF;&#x3002;&#x522B;&#x90A3;&#x4E48;LOW &#x3002;
</code></pre>
                                    <h5
                                        id="29-&#x2605;&#x2605;-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;css3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="29-&#x2605;&#x2605;-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;css3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#29-&#x2605;&#x2605;-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;css3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="29-&#x2605;&#x2605;-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;css3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#29-&#x2605;&#x2605;-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;css3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>29. &#x2605;&#x2605;
                                        &#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#xFF1F;CSS3&#x4E2D;&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">1. &#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;&#x662F;css2&#x7248;&#x672C;&#x4E2D;&#x7684;&#x65E7;&#x5199;&#x6CD5;&#xFF0C;&#x76F8;&#x5BF9;&#x4E8E;css3&#x4E2D;&#x4F2A;&#x5143;&#x7D20;&#x7684;&#x7684;&#x65B0;&#x5199;&#x6CD5;&#x517C;&#x5BB9;&#x6027;&#x4F1A;&#x66F4;&#x597D;&#x3002;

2. &#x4F2A;&#x5143;&#x7D20;&#x53EA;&#x80FD;&#x5728;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x4E2D;&#x51FA;&#x73B0;&#x4E00;&#x6B21;&#xFF0C;&#x4E14;&#x9700;&#x8981;&#x914D;&#x5408;content&#x5C5E;&#x6027;&#x4E00;&#x8D77;&#x4F7F;&#x7528;

3. &#x4F2A;&#x5143;&#x7D20;&#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x5728;DOM&#x4E2D;&#xFF0C;&#x6240;&#x4EE5;&#x4E0D;&#x80FD;&#x901A;&#x8FC7;js&#x6765;&#x8FDB;&#x884C;&#x64CD;&#x4F5C;&#xFF0C;&#x4EC5;&#x4EC5;&#x662F;&#x5728;&#x6E32;&#x67D3;&#x5C42;&#x52A0;&#x5165;&#x800C;&#x5DF2;

css3&#x5F15;&#x5165;&#x7684;&#x4F2A;&#x5143;&#x7D20;&#xFF1A;
    1&#x3001; ::after  //&#x5728;xxx&#x4E4B;&#x540E;&#x63D2;&#x5165;&#x5185;&#x5BB9;
    2&#x3001; ::before     // &#x5728;xxx&#x4E4B;&#x524D;&#x63D2;&#x5165;&#x5185;&#x5BB9;
    3&#x3001; ::first-letter  //&#x9009;&#x62E9;xxx&#x5143;&#x7D20;&#x7684;&#x9996;&#x5B57;&#x6BCD;
    4&#x3001; ::first-line       //&#x9009;&#x62E9;xxx&#x5143;&#x7D20;&#x7684;&#x9996;&#x884C;
    5&#x3001; ::selection     //&#x9009;&#x62E9;&#x7528;&#x6237;&#x9009;&#x62E9;&#x7684;&#x5143;&#x7D20;&#x90E8;&#x5206;
</code></pre>
                                    <h5
                                        id="30-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;html5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;html&#x548C;html5&#xFF1F;">
                                        <a name="30-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;html5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;html&#x548C;html5&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#30-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;html5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;html&#x548C;html5&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="30-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;html5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;html&#x548C;html5&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#30-&#x2605;&#x2605;-html5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;html5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;html&#x548C;html5&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>30. &#x2605;&#x2605;
                                        HTML5&#x6709;&#x54EA;&#x4E9B;&#x65B0;&#x7279;&#x6027;&#xFF0C;&#x79FB;&#x9664;&#x4E86;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#xFF1F;&#x5982;&#x4F55;&#x5904;&#x7406;HTML5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1F;&#x5982;&#x4F55;&#x533A;&#x5206;HTML&#x548C;HTML5&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">HTML5 &#x65B0;&#x7279;&#x6027;&#xFF1A;
    &#x4E00;&#x3001;&#x8BED;&#x4E49;&#x6807;&#x7B7E;

    &#x4E8C;&#x3001;&#x589E;&#x5F3A;&#x578B;&#x8868;&#x5355;

    &#x4E09;&#x3001;&#x89C6;&#x9891;&#x548C;&#x97F3;&#x9891;

    &#x56DB;&#x3001;Canvas&#x7ED8;&#x56FE;

    &#x4E94;&#x3001;SVG&#x7ED8;&#x56FE;

    &#x516D;&#x3001;&#x5730;&#x7406;&#x5B9A;&#x4F4D;

    &#x4E03;&#x3001;&#x62D6;&#x653E;API

    &#x516B;&#x3001;WebWorker

    &#x4E5D;&#x3001;WebStorage

    &#x5341;&#x3001;WebSocket

&#x79FB;&#x9664;&#x7684;&#x5143;&#x7D20;&#xFF1A;
    1&#x3001;&#x7EAF;&#x8868;&#x73B0;&#x7684;&#x5143;&#x7D20;&#xFF1A;basefont&#xFF0C;big&#xFF0C;center&#xFF0C;font,s&#xFF0C;strike&#xFF0C;tt&#xFF0C;u&#x3002;

    2&#x3001;&#x5BF9;&#x53EF;&#x7528;&#x6027;&#x4EA7;&#x751F;&#x8D1F;&#x9762;&#x5F71;&#x54CD;&#x7684;&#x5143;&#x7D20;&#xFF1A;frame&#xFF0C;frameset&#xFF0C;noframes&#x3002;

&#x5904;&#x7406;HTML5&#x65B0;&#x6807;&#x7B7E;&#x517C;&#x5BB9;&#x95EE;&#x9898;&#xFF1A; &#x4F7F;&#x7528;html5shiv
    &#x539F;&#x7406;&#xFF1A;&#x7528;document.createElement()&#x521B;&#x5EFA;html5&#x6807;&#x7B7E;

    &#x7528;&#x6CD5;&#xFF1A;1&#x3001;&#x5728;&#x9875;&#x9762;&#x5F15;&#x5165;html5shiv.js
         2&#x3001;&#x5728;&#x6837;&#x5F0F;&#x4E2D;&#x7F16;&#x5199; article,aside,dialog,footer,header,section,footer,nav,figure,menu
{display:block}

&#x5982;&#x4F55;&#x533A;&#x5206;HTML&#x548C;HTML5&#xFF1A;
    HTML&#xFF1A;  1&#xFF09;&#x6807;&#x8BC6;&#x6587;&#x672C;&#xFF08;eg: &#x5B9A;&#x4E49;&#x6807;&#x9898;&#x6587;&#x672C;&#x3001;&#x6BB5;&#x843D;&#x6587;&#x672C;&#x3001;&#x5217;&#x8868;&#x6587;&#x672C;&#x3001;&#x9884;&#x5B9A;&#x4E49;&#x6587;&#x672C;&#xFF09;&#xFF1B;
            2&#xFF09;&#x5EFA;&#x7ACB;&#x8D85;&#x94FE;&#x63A5;&#xFF0C;&#x4FBF;&#x4E8E;&#x9875;&#x9762;&#x94FE;&#x63A5;&#x7684;&#x8DF3;&#x8F6C;&#xFF1B;
            3&#xFF09;&#x521B;&#x5EFA;&#x5217;&#x8868;&#xFF0C;&#x628A;&#x4FE1;&#x606F;&#x6709;&#x5E8F;&#x5730;&#x7EC4;&#x7EC7;&#x5728;&#x4E00;&#x8D77;&#xFF0C;&#x65B9;&#x4FBF;&#x6D4F;&#x89C8;&#xFF1B;
            4&#xFF09;&#x5728;&#x7F51;&#x9875;&#x4E2D;&#x663E;&#x793A;&#x201C;&#x56FE;&#x50CF;&#x3001;&#x58F0;&#x97F3;&#x3001;&#x89C6;&#x9891;&#x3001;&#x52A8;&#x753B;&#x201D;&#x7B49;&#x591A;&#x5A92;&#x4F53;&#x4FE1;&#x606F;&#xFF0C;&#x4F7F;&#x7F51;&#x9875;&#x8BBE;&#x8BA1;&#x66F4;&#x5177;&#x51B2;&#x51FB;&#x529B;&#xFF1B;
            5&#xFF09;&#x53EF;&#x5236;&#x4F5C;&#x8868;&#x683C;&#xFF0C;&#x4EE5;&#x4FBF;&#x663E;&#x793A;&#x5927;&#x91CF;&#x6570;&#x636E;&#xFF1B;
            6&#xFF09;&#x53EF;&#x5236;&#x4F5C;&#x8868;&#x5355;&#xFF0C;&#x5141;&#x8BB8;&#x5728;&#x7F51;&#x9875;&#x5185;&#x8F93;&#x5165;&#x6587;&#x672C;&#x4FE1;&#x606F;&#xFF0C;&#x6267;&#x884C;&#x5176;&#x4ED6;&#x7528;&#x6237;&#x64CD;&#x4F5C;&#xFF0C;&#x65B9;&#x4FBF;&#x4FE1;&#x606F;&#x4E92;&#x52A8;&#xFF1B;
            7&#xFF09;&#x6CA1;&#x6709;&#x4F53;&#x73B0;&#x7ED3;&#x6784;&#x8BED;&#x4E49;&#x5316;&#x7684;&#x6807;&#x7B7E;&#xFF08;&#x5E38;&#x7528;&#x547D;&#x540D;&#x65B9;&#x5F0F;&#x5982;&#x4E0B;&#xFF0C;eg: &lt;div id=&#x201C;header&#x201D;&gt;&lt;/div&gt;, &#x8BE5;&#x8BED;&#x53E5;&#x7528;&#x6765;&#x8868;&#x793A;&#x7F51;&#x7AD9;&#x7684;&#x5934;&#x90E8;&#xFF09;&#x3002;

    HTML5&#xFF1A; 1&#xFF09;&#x7528;&#x4E8E;&#x7ED8;&#x753B;&#x7684;canvas&#x5143;&#x7D20;&#xFF1B;
            2&#xFF09;&#x7528;&#x4E8E;&#x5A92;&#x4ECB;&#x56DE;&#x653E;&#x7684;video&#x548C;audio&#x5143;&#x7D20;&#xFF1B;
            3&#xFF09;&#x5BF9;&#x672C;&#x5730;&#x79BB;&#x7EBF;&#x5B58;&#x50A8;&#x6709;&#x66F4;&#x597D;&#x7684;&#x652F;&#x6301;&#xFF1B;
            4&#xFF09;&#x65B0;&#x7684;&#x7279;&#x6B8A;&#x5185;&#x5BB9;&#x5143;&#x7D20;&#xFF08;eg: article&#x3001;footer&#x3001;header&#x3001;nav&#x3001;section&#x7B49;&#xFF09;&#xFF1B;
            5&#xFF09;&#x65B0;&#x7684;&#x8868;&#x5355;&#x63A7;&#x4EF6;&#xFF08;eg: calendar&#x3001;date&#x3001;time&#x3001;email&#x3001;url&#x3001;search&#x7B49;&#xFF09;&#xFF1B;
            6&#xFF09;&#x6709;&#x8BED;&#x4E49;&#x4F18;&#x52BF;&#xFF0C;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E9B;&#x65B0;&#x6807;&#x7B7E;&#xFF0C;&#xFF08;eg: &lt;header&gt; &lt;article&gt; &lt;footer&gt; &#x63D0;&#x4F9B;&#x4E86;&#x8BED;&#x4E49;&#x5316;&#x6807;&#x7B7E;&#xFF09;&#xFF0C;&#x53EF;&#x4EE5;&#x66F4;&#x597D;&#x5730;&#x652F;&#x6301;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x7684;&#x8BFB;&#x53D6;&#xFF0C;&#x4FBF;&#x4E8E;SEO&#x8718;&#x86DB;&#x7684;&#x722C;&#x884C;&#x3002;
</code></pre>
                                    <h5
                                        id="31-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;">
                                        <a name="31-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#31-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="31-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#31-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>31. &#x2605;&#x2605;
                                        &#x5E38;&#x89C1;&#x6D4F;&#x89C8;&#x5668;&#x517C;&#x5BB9;&#x6027;&#x95EE;&#x9898;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">1&#x3001;&#x4E0D;&#x540C;&#x6D4F;&#x89C8;&#x5668;&#x4E0B;&#x7684;<span class="hljs-selector-tag">padding</span>&#x548C;<span class="hljs-selector-tag">margin</span>&#x4E0D;&#x540C;
    &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A;&#x4F7F;&#x7528;&#x901A;&#x914D;&#x7B26;(*)&#x5C06;<span class="hljs-selector-tag">padding</span>&#x548C;<span class="hljs-selector-tag">margin</span>&#x8BBE;&#x7F6E;&#x4E3A;0

2&#x3001;&#x5757;&#x5C5E;&#x6027;&#x6807;&#x7B7E;<span class="hljs-selector-tag">float</span>&#x4E4B;&#x540E;&#xFF0C;&#x53C8;&#x6709;&#x6A2A;&#x5411;&#x7684;<span class="hljs-selector-tag">margin</span>&#x503C;&#xFF0C;&#x5728;<span class="hljs-selector-tag">IE6</span>&#x4E2D;&#x663E;&#x793A;&#x4F1A;&#x6BD4;&#x8BBE;&#x7F6E;&#x7684;&#x5927;&#xFF08;<span class="hljs-selector-tag">IE6</span>&#x53CC;&#x8FB9;&#x8DDD;<span class="hljs-selector-tag">bug</span>&#xFF09;
    &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A;&#x5728;<span class="hljs-selector-tag">float</span>&#x6807;&#x7B7E;&#x6837;&#x5F0F;&#x63A7;&#x5236;&#x4E2D;&#x52A0;&#x5165;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:inline</span>;

3&#x3001;&#x8BBE;&#x7F6E;&#x8F83;&#x5C0F;&#x7684;&#x9AD8;&#x5EA6;&#x6807;&#x7B7E;&#xFF08;&#x4E00;&#x822C;&#x5C0F;&#x4E8E;10<span class="hljs-selector-tag">px</span>&#xFF09;&#xFF0C;&#x5728;<span class="hljs-selector-tag">IE6</span>&#xFF0C;<span class="hljs-selector-tag">IE7</span>&#xFF0C;&#x9068;&#x6E38;&#x4E2D;&#x8D85;&#x51FA;&#x81EA;&#x5DF1;&#x8BBE;&#x7F6E;&#x7684;&#x9AD8;&#x5EA6;
    &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A;&#x7ED9;&#x8D85;&#x51FA;&#x9AD8;&#x5EA6;&#x7684;&#x6807;&#x7B7E;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">overflow</span><span class="hljs-selector-pseudo">:hidden</span>;&#x6216;&#x8005;&#x8BBE;&#x7F6E;&#x884C;&#x9AD8;<span class="hljs-selector-tag">line-height</span>&#x5C0F;&#x4E8E;&#x4F60;&#x8BBE;&#x7F6E;&#x7684;&#x9AD8;&#x5EA6;&#x3002;

4&#x3001;&#x884C;&#x5185;&#x6807;&#x7B7E;&#x8BBE;&#x7F6E;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:block</span>;&#x540E;&#x53C8;&#x91C7;&#x7528;<span class="hljs-selector-tag">float</span>&#x5E03;&#x5C40;&#xFF0C;&#x518D;&#x8BBE;&#x7F6E;&#x6A2A;&#x5411;<span class="hljs-selector-tag">margin</span>&#x503C;&#x65F6;&#xFF0C;&#x5728;<span class="hljs-selector-tag">IE6</span>&#x4E2D;&#x663E;&#x793A;&#x4F1A;&#x6BD4;&#x8BBE;&#x7F6E;&#x7684;&#x5927;&#xFF08;<span class="hljs-selector-tag">IE6</span>&#x53CC;&#x8FB9;&#x8DDD;<span class="hljs-selector-tag">bug</span>&#xFF09;
    &#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1A;&#x5728;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:block</span>;&#x540E;&#x9762;&#x52A0;&#x4E0A;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:inline</span>;<span class="hljs-selector-tag">display</span><span class="hljs-selector-pseudo">:table</span>;

5&#x3001;&#x2026;&#x2026;&#x66F4;&#x591A;&#x8BF7;&#x770B;&#x94FE;&#x63A5;
</code></pre>
                                    <h5
                                        id="32-&#x2605;-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;">
                                        <a name="32-&#x2605;-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#32-&#x2605;-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="32-&#x2605;-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#32-&#x2605;-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>32. &#x2605;
                                        &#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1F;&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1F;&#x7A7A;&#x5143;&#x7D20;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF1A;1. &#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x503C;&#xFF0C;&#x5143;&#x7D20;&#x5927;&#x5C0F;&#x8D85;&#x51FA;html&#x6587;&#x6863;&#x4F1A;&#x81EA;&#x52A8;&#x6362;&#x884C;
        2. &#x5916;&#x8FB9;&#x8DDD;&#x548C;&#x5185;&#x8FB9;&#x8DDD;&#x90FD;&#x53EF;&#x63A7;&#x5236;
        3. &#x53EF;&#x4EE5;&#x5BB9;&#x7EB3;&#x884C;&#x5185;&#x5143;&#x7D20;&#x548C;&#x5176;&#x4ED6;&#x5757;&#x5143;&#x7D20;

&#x884C;&#x5185;&#x5143;&#x7D20;&#xFF1A;1. &#x4E0D;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x503C;&#xFF0C;&#x5143;&#x7D20;&#x7D27;&#x8DDF;&#x5728;&#x524D;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x540E;&#x9762;&#xFF0C;&#x4E0D;&#x4F1A;&#x6362;&#x884C;
        2. &#x5BBD;&#x5EA6;&#x5C31;&#x662F;&#x5B83;&#x7684;&#x6587;&#x5B57;&#x6216;&#x56FE;&#x7247;&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x4E0D;&#x53EF;&#x6539;&#x53D8;&#xFF1B;
        3. &#x5185;&#x8054;&#x5143;&#x7D20;&#x53EA;&#x80FD;&#x5BB9;&#x7EB3;&#x6587;&#x672C;&#x6216;&#x8005;&#x5176;&#x4ED6;&#x5185;&#x8054;&#x5143;&#x7D20;&#xFF1B;

&#x7A7A;&#x5143;&#x7D20;&#xFF1A; 1. &#x6CA1;&#x6709;&#x95ED;&#x5408;&#x6807;&#x7B7E;&#x7684;&#x6807;&#x7B7E;&#x88AB;&#x79F0;&#x4F5C;&#x4E3A;&#x7A7A;&#x6807;&#x7B7E;&#x3002;
        2.&#x5728;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x7684;&#x6807;&#x7B7E;&#x4E2D;&#xFF0C;&#x6709;&#x7684;&#x5177;&#x6709;&#x95ED;&#x5408;&#x6807;&#x7B7E;&#x3002;&#x4F8B;&#x5982;&lt;td&gt;&#x6807;&#x7B7E;&#xFF0C;&#x5B83;&#x6709;&#x95ED;&#x5408;&#x6807;&#x7B7E;&lt;/td&gt;&#x3002;&#x4F46;&#x662F;&#x4E5F;&#x6709;&#x4E00;&#x90E8;&#x5206;&#x6807;&#x7B7E;&#x6CA1;&#x6709;&#x95ED;&#x5408;&#x6807;&#x7B7E;&#xFF0C;&#x4F8B;&#x5982;&lt;br /&gt;&#x6807;&#x7B7E;&#xFF0C;&#x8FD9;&#x4E00;&#x7C7B;&#x6807;&#x7B7E;&#x6211;&#x4EEC;&#x79F0;&#x4E4B;&#x4E3A;&#x7A7A;&#x6807;&#x7B7E;&#x3002;
</code></pre>
                                    <h5
                                        id="33-&#x2605;&#x2605;-media&#x5C5E;&#x6027;&#xFF1F;screen-all-max-width-min-width">
                                        <a name="33-&#x2605;&#x2605;-media&#x5C5E;&#x6027;&#xFF1F;screen-all-max-width-min-width"
                                            class="anchor-navigation-ex-anchor"
                                            href="#33-&#x2605;&#x2605;-media&#x5C5E;&#x6027;&#xFF1F;screen-all-max-width-min-width"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="33-&#x2605;&#x2605;-media&#x5C5E;&#x6027;&#xFF1F;screen-all-max-width-min-width"
                                            class="plugin-anchor"
                                            href="#33-&#x2605;&#x2605;-media&#x5C5E;&#x6027;&#xFF1F;screen-all-max-width-min-width"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>33. &#x2605;&#x2605;
                                        media&#x5C5E;&#x6027;&#xFF1F;screen? All? max-width? min-width?
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">media</span>&#xFF1A; &#x5A92;&#x4F53;&#x67E5;&#x8BE2;

<span class="hljs-selector-tag">screen</span> &#xFF1A;&#x8BA1;&#x7B97;&#x673A;&#x5C4F;&#x5E55;

<span class="hljs-selector-tag">All</span> &#xFF1A;&#x9ED8;&#x8BA4;&#xFF0C;&#x9002;&#x5408;&#x6240;&#x6709;&#x8BBE;&#x5907;

<span class="hljs-selector-tag">max</span>(<span class="hljs-selector-tag">min</span>)<span class="hljs-selector-tag">-width</span> &#xFF1A;&#x89C4;&#x5B9A;&#x76EE;&#x6807;&#x663E;&#x793A;&#x533A;&#x57DF;&#x7684;&#x5BBD;&#x5EA6;

<span class="hljs-selector-tag">css</span>&#x5408;&#x5E76;&#x5199;&#x6CD5;&#xFF1A; @<span class="hljs-keyword">media</span> screen and (min-width:xxxpx) {}
</code></pre>
                                    <h5 id="34-&#x2605;-meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;"><a
                                            name="34-&#x2605;-meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#34-&#x2605;-meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="34-&#x2605;-meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;"
                                            class="plugin-anchor"
                                            href="#34-&#x2605;-meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>34. &#x2605;
                                        meta&#x6807;&#x7B7E;&#x7684;name&#x5C5E;&#x6027;&#x503C;?</h5>
                                    <pre><code class="lang-css">&#x89E3;&#x91CA;&#xFF1A;meta&#x6807;&#x7B7E;&#x7684; name &#x5C5E;&#x6027;&#x662F;&#x7528;&#x6765;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A; HTML &#x6587;&#x6863;&#x7684;&#x63CF;&#x8FF0;&#x3001;&#x5173;&#x952E;&#x8BCD;&#xFF0C;&#x89C4;&#x5B9A;&#x4E86;&#x5143;&#x6570;&#x636E;&#x7684;&#x540D;&#x79F0;&#xFF0C;&#x89C4;&#x5B9A;&#x4E86;content&#x5C5E;&#x6027;&#x7684;&#x4FE1;&#x606F;/&#x503C;&#x7684;&#x540D;&#x79F0;
&#x5C5E;&#x6027;&#x503C;&#xFF1A; 1. application-name  //&#x89C4;&#x5B9A;&#x9875;&#x9762;&#x6240;&#x4EE3;&#x8868;&#x7684;Web&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x7684;&#x540D;&#x79F0;
        2. author     //&#x89C4;&#x5B9A;&#x9875;&#x9762;&#x6587;&#x6863;&#x7684;&#x4F5C;&#x8005;&#x7684;&#x540D;&#x5B57;
            &#x5B9E;&#x4F8B;&#xFF1A; &lt;meta name=&quot;author&quot; content=&quot;&#x4F5C;&#x8005;&#x540D;&#x79F0;&quot;&gt;

        3. description    //&#x89C4;&#x5B9A;&#x9875;&#x9762;&#x7684;&#x63CF;&#x8FF0;&#x3002;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x4F1A;&#x628A;&#x8FD9;&#x4E2A;&#x63CF;&#x8FF0;&#x663E;&#x793A;&#x5728;&#x641C;&#x7D22;&#x7ED3;&#x679C;&#x4E2D;
            &#x5B9E;&#x4F8B;&#xFF1A; &lt;meta name=&quot;description&quot; content=&quot;&#x9875;&#x9762;&#x63CF;&#x8FF0;&quot;&gt;

        4. gennerator    //&#x89C4;&#x5B9A;&#x7528;&#x4E8E;&#x751F;&#x6210;&#x6587;&#x6863;&#x7684;&#x4E00;&#x4E2A;&#x8F6F;&#x4EF6;&#x5305;&#xFF08;&#x4E0D;&#x7528;&#x4E8E;&#x624B;&#x5199;&#x9875;&#x9762;&#xFF09;&#x3002;
            &#x5B9E;&#x4F8B;&#xFF1A; &lt;meta name=&quot;generator&quot; content=&quot;FrontPage 4.0&quot;&gt;

        5. keywords    //&#x89C4;&#x5B9A;&#x4E00;&#x4E2A;&#x9017;&#x53F7;&#x5206;&#x9694;&#x7684;&#x5173;&#x952E;&#x8BCD;&#x5217;&#x8868; - &#x76F8;&#x5173;&#x7684;&#x7F51;&#x9875;&#xFF08;&#x544A;&#x8BC9;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x9875;&#x9762;&#x662F;&#x4E0E;&#x4EC0;&#x4E48;&#x76F8;&#x5173;&#x7684;&#xFF09;&#x3002;
            &#x5B9E;&#x4F8B;&#xFF1A; &lt;meta name=&quot;keywords&quot; content=&quot;HTML, meta tag, tag reference&quot;
            &#x63D0;&#x793A;&#xFF1A;&#x603B;&#x662F;&#x89C4;&#x5B9A;&#x5173;&#x952E;&#x8BCD;&#xFF08;&#x5BF9;&#x4E8E;&#x641C;&#x7D22;&#x5F15;&#x64CE;&#x8FDB;&#x884C;&#x9875;&#x9762;&#x5206;&#x7C7B;&#x662F;&#x5FC5;&#x8981;&#x7684;&#xFF09;&#x3002;
</code></pre>
                                    <h5
                                        id="35-&#x2605;&#x2605;-&#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;">
                                        <a name="35-&#x2605;&#x2605;-&#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#35-&#x2605;&#x2605;-&#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="35-&#x2605;&#x2605;-&#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"
                                            class="plugin-anchor"
                                            href="#35-&#x2605;&#x2605;-&#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>35. &#x2605;&#x2605;
                                        &#x4E00;&#x822C;&#x505A;&#x624B;&#x673A;&#x9875;&#x9762;&#x5207;&#x56FE;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;
                                    </h5>
                                    <pre><code class="lang-css">1&#x3001;<span class="hljs-selector-tag">DPR</span>&#xFF1A;2    <span class="hljs-selector-tag">-----</span>  &#x5207;&#x4E24;&#x500D;&#x56FE;&#xFF0C;&#xFF08;&#x5373;&#x8BBE;&#x8BA1;&#x539F;&#x56FE;&#x5927;&#x5C0F;&#xFF0C;&#x56E0;&#x4E3A;&#x8BBE;&#x8BA1;&#x56FE;&#x662F;&#x6309;&#x539F;&#x6765;&#x7684;&#x624B;&#x673A;&#x5C3A;&#x5BF8;&#x653E;&#x5927;&#x4E24;&#x500D;&#x4E4B;&#x540E;&#x7684;&#xFF09;  &#x4E00;&#x822C;&#x4FDD;&#x5B58;&#x4E3A;<span class="hljs-selector-tag">xxx</span>@<span class="hljs-keyword">2x</span>

<span class="hljs-number">2</span>&#x3001;DPR&#xFF1A;<span class="hljs-number">3</span> -----   &#x5207;&#x4E09;&#x500D;&#x56FE;&#xFF08;&#x5373;&#x8BBE;&#x8BA1;&#x539F;&#x56FE;&#x5927;&#x5C0F;&#x7684;<span class="hljs-number">1.5</span>&#x500D;&#xFF0C;&#x56E0;&#x4E3A;&#x8BBE;&#x8BA1;&#x56FE;&#x662F;&#x6309;&#x539F;&#x6765;&#x7684;&#x624B;&#x673A;&#x5C3A;&#x5BF8;&#x653E;&#x5927;&#x4E24;&#x500D;&#x4E4B;&#x540E;&#x7684;&#xFF09;     &#x4E00;&#x822C;&#x4FDD;&#x5B58;&#x4E3A;xxx@<span class="hljs-number">3</span>x

&#x5207;&#x56FE;&#x7684;&#x6CE8;&#x610F;&#x4E8B;&#x9879;&#xFF1A;
    <span class="hljs-number">1</span>&#x3001; &#x5C3A;&#x5BF8;&#xFF1A;&#x4E00;&#x5B9A;&#x662F;&#x8981;&#x5076;&#x6570;
    <span class="hljs-number">2</span>&#x3001; &#x547D;&#x540D;&#xFF1A;&#x547D;&#x540D;&#x9700;&#x8981;&#x7B26;&#x5408;&#x529F;&#x80FD;&#x677F;&#x5757;
    <span class="hljs-number">3</span>&#x3001; &#x2026;&#x2026;&#x66F4;&#x591A;&#x8BE6;&#x60C5;&#x770B;&#x94FE;&#x63A5;
</code></pre>
                                    <h5
                                        id="36-&#x2605;&#x2605;-pxemrem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;625">
                                        <a name="36-&#x2605;&#x2605;-pxemrem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;625"
                                            class="anchor-navigation-ex-anchor"
                                            href="#36-&#x2605;&#x2605;-pxemrem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;625"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="36-&#x2605;&#x2605;-pxemrem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;625"
                                            class="plugin-anchor"
                                            href="#36-&#x2605;&#x2605;-pxemrem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;625"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>36. &#x2605;&#x2605;
                                        px/em/rem&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x901A;&#x5E38;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x7684;&#x5B57;&#x4F53;&#x4E3A;62.5%
                                    </h5>
                                    <pre><code class="lang-css">px&#xFF08;&#x50CF;&#x7D20;&#xFF09;&#xFF1A;&#x9875;&#x9762;&#x9ED8;&#x8BA4;&#x7684;&#x5C3A;&#x5BF8;&#x8BA1;&#x7B97;&#x5355;&#x4F4D;&#xFF0C;&#x7EDD;&#x5BF9;&#x957F;&#x5EA6;,&#x5B83;&#x662F;&#x76F8;&#x5BF9;&#x4E8E;&#x663E;&#x793A;&#x5668;&#x5C4F;&#x5E55;&#x5206;&#x8FA8;&#x7387;&#x800C;&#x8A00;&#x7684;

    &#x7279;&#x70B9;&#xFF1A;1. IE&#x65E0;&#x6CD5;&#x8C03;&#x6574;&#x90A3;&#x4E9B;&#x4F7F;&#x7528;px&#x4F5C;&#x4E3A;&#x5355;&#x4F4D;&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;
         2. &#x56FD;&#x5916;&#x7684;&#x5927;&#x90E8;&#x5206;&#x7F51;&#x7AD9;&#x80FD;&#x591F;&#x8C03;&#x6574;&#x7684;&#x539F;&#x56E0;&#x5728;&#x4E8E;&#x5176;&#x4F7F;&#x7528;&#x4E86;em&#x6216;rem&#x4F5C;&#x4E3A;&#x5B57;&#x4F53;&#x5355;&#x4F4D;&#xFF1B;
         3. Firefox&#x80FD;&#x591F;&#x8C03;&#x6574;px&#x548C;em&#xFF0C;rem&#xFF0C;&#x4F46;&#x662F;96%&#x4EE5;&#x4E0A;&#x7684;&#x4E2D;&#x56FD;&#x7F51;&#x6C11;&#x4F7F;&#x7528;IE&#x6D4F;&#x89C8;&#x5668;(&#x6216;&#x5185;&#x6838;)&#x3002;


em&#xFF1A;&#x76F8;&#x5BF9;&#x957F;&#x5EA6;&#xFF0C;&#x76F8;&#x5BF9;&#x4E8E;&#x5E94;&#x7528;&#x5728;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x7684;&#x5B57;&#x4F53;&#x5C3A;&#x5BF8;&#xFF1B;&#x4E00;&#x822C;&#x6D4F;&#x89C8;&#x5668;&#x9ED8;&#x8BA4;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x4E3A;16px&#xFF0C;&#x5219; 1em = 16px

    &#x7279;&#x70B9;&#xFF1A;1. em&#x7684;&#x503C;&#x5E76;&#x4E0D;&#x662F;&#x56FA;&#x5B9A;&#x7684;&#xFF1B;
         2. em&#x4F1A;&#x7EE7;&#x627F;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x3002;


rem&#xFF08;root em&#xFF09;&#xFF1A;&#x76F8;&#x5BF9;&#x5355;&#x4F4D;&#xFF0C;&#x76F8;&#x5BF9;&#x4E8E;html&#x6839;&#x5143;&#x7D20;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x7684;&#x5355;&#x4F4D;&#xFF0C;&#x5F53;html&#x7684;font-size&#xFF1A;16px&#x65F6;&#xFF0C;1rem = 16px

    &#x7279;&#x70B9;&#xFF1A;1. &#x8FD9;&#x4E2A;&#x5355;&#x4F4D;&#x53EF;&#x8C13;&#x96C6;&#x76F8;&#x5BF9;&#x5927;&#x5C0F;&#x548C;&#x7EDD;&#x5BF9;&#x5927;&#x5C0F;&#x7684;&#x4F18;&#x70B9;&#x4E8E;&#x4E00;&#x8EAB;&#xFF0C;&#x901A;&#x8FC7;&#x5B83;&#x65E2;&#x53EF;&#x4EE5;&#x505A;&#x5230;&#x53EA;&#x4FEE;&#x6539;&#x6839;&#x5143;&#x7D20;&#x5C31;&#x6210;&#x6BD4;&#x4F8B;&#x5730;&#x8C03;&#x6574;&#x6240;&#x6709;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF0C;&#x53C8;&#x53EF;&#x4EE5;&#x907F;&#x514D;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x9010;&#x5C42;&#x590D;&#x5408;&#x7684;&#x8FDE;&#x9501;&#x53CD;&#x5E94;&#x3002;
         2. &#x9664;&#x4E86;IE8&#x53CA;&#x66F4;&#x65E9;&#x7248;&#x672C;&#x5916;&#xFF0C;&#x6240;&#x6709;&#x6D4F;&#x89C8;&#x5668;&#x5747;&#x5DF2;&#x652F;&#x6301;rem&#x3002;


&#x4E3A;&#x4EC0;&#x4E48;&#x7ED9;font-size&#x8BBE;&#x7F6E;&#x4E3A;62.5%&#xFF1A; &#x65B9;&#x4FBF;&#x6362;&#x7B97;&#xFF01;
    1. &#x56E0;&#x4E3A;&#x7EDD;&#x5927;&#x591A;&#x6570;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x9ED8;&#x8BA4;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x4E3A; 16px &#xFF0C;&#x800C;&#x5C06;font-size&#x8BBE;&#x7F6E;&#x4E3A; 62.5% &#x5219;&#x7B49;&#x4EF7;&#x4E8E;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x7684;font-size:10px;
    2. &#x968F;&#x4E4B;&#x5728;&#x5176;&#x4ED6;&#x7684;&#x6362;&#x7B97;&#x5355;&#x4F4D;&#xFF0C;&#x5982; rem &#x7684;&#x5B57;&#x4F53;&#x6362;&#x7B97;&#x65F6;&#xFF0C;&#x5219;&#x53EF;&#x4EE5;&#x8868;&#x793A;&#x4E3A; 1rem = 10px&#xFF0C; &#x6574;&#x6570;&#x503C;&#x5BF9;&#x4E8E;&#x5355;&#x4F4D;&#x7684;&#x6362;&#x7B97;&#x4F1A;&#x6BD4;&#x8F83;&#x65B9;&#x4FBF;

    3. &#x4F46;&#x662F;&#x5728;Chrome&#xFF08;&#x8C37;&#x6B4C;&#x6D4F;&#x89C8;&#x5668;&#xFF09;&#x4E2D;&#xFF0C;&#x652F;&#x6301;&#x6700;&#x5C0F;&#x5B57;&#x4F53;&#x7684;&#x5927;&#x5C0F;&#x4E3A; 12px &#xFF0C;&#x89E3;&#x51B3;&#x529E;&#x6CD5;&#x5C31;&#x662F; &#x5C06;html&#x6839;&#x5B57;&#x4F53;&#x8BBE;&#x7F6E;&#x4E3A; font-size: 625%; &#x610F;&#xFF1A;1rem = 100px &#xFF0C;&#x4EE5;&#x6B64;&#x5355;&#x4F4D;&#x6362;&#x7B97;
</code></pre>
                                    <h5
                                        id="37-&#x2605;&#x2605;-sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;-sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;">
                                        <a name="37-&#x2605;&#x2605;-sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;-sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#37-&#x2605;&#x2605;-sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;-sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="37-&#x2605;&#x2605;-sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;-sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;"
                                            class="plugin-anchor"
                                            href="#37-&#x2605;&#x2605;-sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;-sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>37. &#x2605;&#x2605;
                                        sass&#x548C;scss&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;?
                                        sass&#x4E00;&#x822C;&#x600E;&#x4E48;&#x6837;&#x7F16;&#x8BD1;&#x7684;
                                    </h5>
                                    <pre><code class="lang-css">&#x533A;&#x522B;&#xFF1A;1&#x3001;<span class="hljs-selector-tag">sass</span> &#x4E66;&#x5199;&#x65F6;&#x4E0D;&#x5E26;&#x5927;&#x62EC;&#x53F7;, <span class="hljs-selector-tag">scss</span> &#x5E26;&#x5927;&#x62EC;&#x53F7;
         &#x4F8B;&#xFF1A; <span class="hljs-selector-tag">sass-</span>  <span class="hljs-selector-class">.box</span>
                       <span class="hljs-selector-tag">color</span><span class="hljs-selector-pseudo">:red</span>

             <span class="hljs-selector-tag">scss-</span>   <span class="hljs-selector-class">.box</span>{
                <span class="hljs-attribute">color</span>:red;
               }
     2&#x3001; <span class="hljs-selector-tag">sass</span> &#x6CA1;&#x6709; ; &#x53F7; , <span class="hljs-selector-tag">scss</span>&#x6709;

     3&#x3001; <span class="hljs-selector-tag">scss</span> &#x5199;&#x6CD5;&#x548C;<span class="hljs-selector-tag">css</span> &#x7B80;&#x76F4;&#x4E00;&#x6837;

<span class="hljs-selector-tag">sass</span>&#x7F16;&#x8BD1;&#xFF1A;
    1. <span class="hljs-selector-tag">sass</span> &#x662F;&#x57FA;&#x4E8E;<span class="hljs-selector-tag">Ruby</span>&#x8BED;&#x8A00;&#x5F00;&#x53D1;&#x800C;&#x6210;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x5728;&#x4F7F;&#x7528; <span class="hljs-selector-tag">sass</span>&#x8BED;&#x8A00;&#x4E4B;&#x524D;&#x5F97;&#x5148;&#x884C;&#x5B89;&#x88C5;<span class="hljs-selector-tag">Ruby</span>&#x7F16;&#x8BD1;&#x5668;&#x3002;
    2. <span class="hljs-selector-tag">Sass</span>&#x8BED;&#x8A00;&#x6709;&#x4E24;&#x79CD;&#x540E;&#x7F00;&#x540D;&#xFF0C;&#x5206;&#x522B;&#x662F; <span class="hljs-selector-class">.sass</span> &#x548C; <span class="hljs-selector-class">.scss</span> &#xFF0C;&#x4E24;&#x8005;&#x53EA;&#x662F;&#x5199;&#x6CD5;&#x6709;&#x4E9B;&#x8BB8;&#x4E0D;&#x540C;&#x3002;
    3. &#x7F16;&#x8BD1;&#x65B9;&#x5F0F;&#xFF1A;
        1&#x3001;&#x547D;&#x4EE4;&#x884C;&#x7F16;&#x8BD1;
            &#x8BE6;&#x60C5;&#x770B;&#x94FE;&#x63A5;&#x2191;
        2&#x3001;&#x63D2;&#x4EF6;&#x4FDD;&#x5B58;&#x7F16;&#x8BD1;
            &#x8BE6;&#x60C5;&#x770B;&#x94FE;&#x63A5;&#x2191;
</code></pre>
                                    <h5
                                        id="38-&#x2605;&#x2605;-&#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;">
                                        <a name="38-&#x2605;&#x2605;-&#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#38-&#x2605;&#x2605;-&#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="38-&#x2605;&#x2605;-&#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#38-&#x2605;&#x2605;-&#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>38. &#x2605;&#x2605;
                                        &#x5982;&#x679C;&#x5BF9;css&#x8FDB;&#x884C;&#x4F18;&#x5316;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x4F18;&#x5316;&#x539F;&#x5219;&#xFF1A;&#x51CF;&#x5C11;css&#x6837;&#x5F0F;&#x7684;&#x6E32;&#x67D3;&#x52A0;&#x8F7D;&#x65F6;&#x95F4;&#xFF0C;&#x901A;&#x8FC7;&#x524A;&#x51CF;css&#x6837;&#x5F0F;&#x7684;&#x4EE3;&#x7801;&#x4F53;&#x79EF;&#x7B49;&#x76F8;&#x5173;&#x64CD;&#x4F5C;

&#x5B9E;&#x8DF5;&#x578B;&#x4F18;&#x5316;&#xFF1A;
    1&#x3001;&#x5185;&#x8054;&#x9996;&#x5C4F;&#x5173;&#x952E;CSS&#xFF08;Critical CSS&#xFF09;&#xFF1A;&#x5185;&#x8054;CSS&#x80FD;&#x591F;&#x4F7F;&#x6D4F;&#x89C8;&#x5668;&#x5F00;&#x59CB;&#x9875;&#x9762;&#x6E32;&#x67D3;&#x7684;&#x65F6;&#x95F4;&#x63D0;&#x524D;
        * &#x6027;&#x80FD;&#x4F18;&#x5316;&#x4E2D;&#x6709;&#x4E00;&#x4E2A;&#x91CD;&#x8981;&#x7684;&#x6307;&#x6807;&#x2014;&#x2014;&#x9996;&#x6B21;&#x6709;&#x6548;&#x7ED8;&#x5236;&#xFF08;First Meaningful Paint&#xFF0C;&#x7B80;&#x79F0;FMP&#xFF09;&#x5373;&#x6307;&#x9875;&#x9762;&#x7684;&#x9996;&#x8981;&#x5185;&#x5BB9;&#xFF08;primary content&#xFF09;&#x51FA;&#x73B0;&#x5728;&#x5C4F;&#x5E55;&#x4E0A;&#x7684;&#x65F6;&#x95F4;
        ** &#x8FD9;&#x4E00;&#x6307;&#x6807;&#x5F71;&#x54CD;&#x7528;&#x6237;&#x770B;&#x5230;&#x9875;&#x9762;&#x524D;&#x6240;&#x9700;&#x7B49;&#x5F85;&#x7684;&#x65F6;&#x95F4;&#xFF0C;&#x800C;&#x5185;&#x8054;&#x9996;&#x5C4F;&#x5173;&#x952E;CSS&#xFF08;&#x5373;Critical CSS&#xFF0C;&#x53EF;&#x4EE5;&#x79F0;&#x4E4B;&#x4E3A;&#x9996;&#x5C4F;&#x5173;&#x952E;CSS&#xFF09;&#x80FD;&#x51CF;&#x5C11;&#x8FD9;&#x4E00;&#x65F6;&#x95F4;&#x3002;

    &#x6CE8;&#xFF1A;&#x5185;&#x8054;css&#x5E76;&#x4E0D;&#x662F;&#x4E0D;&#x52A0;&#x4EE5;&#x9650;&#x5236;&#x7684;&#xFF0C;&#x5B83;&#x7684;&#x521D;&#x59CB;&#x62E5;&#x5835;&#x7A97;&#x53E3;3&#x5B58;&#x5728;&#x9650;&#x5236;&#xFF08;TCP&#x76F8;&#x5173;&#x6982;&#x5FF5;&#xFF0C;&#x901A;&#x5E38;&#x662F; 14.6kb&#xFF0C; &#x538B;&#x7F29;&#x540E;&#x7684;&#x5927;&#x5C0F;&#xFF09;&#xFF0C;&#x5982;&#x679C;&#x5185;&#x8054;CSS&#x540E;&#x7684;&#x6587;&#x4EF6;&#x8D85;&#x51FA;&#x4E86;&#x8FD9;&#x4E00;&#x9650;&#x5236;&#xFF0C;&#x7CFB;&#x7EDF;&#x5C31;&#x9700;&#x8981;&#x5728;&#x670D;&#x52A1;&#x5668;&#x548C;&#x6D4F;&#x89C8;&#x5668;&#x4E4B;&#x95F4;&#x8FDB;&#x884C;&#x66F4;&#x591A;&#x6B21;&#x7684;&#x5F80;&#x8FD4;&#xFF0C;&#x8FD9;&#x6837;&#x5E76;&#x4E0D;&#x80FD;&#x63D0;&#x524D;&#x9875;&#x9762;&#x6E32;&#x67D3;&#x65F6;&#x95F4;&#x3002;

    2&#x3001;&#x5F02;&#x6B65;&#x52A0;&#x8F7D;CSS
        * CSS&#x4F1A;&#x963B;&#x585E;&#x6E32;&#x67D3;&#xFF0C;&#x5728;CSS&#x6587;&#x4EF6;&#x8BF7;&#x6C42;&#x3001;&#x4E0B;&#x8F7D;&#x3001;&#x89E3;&#x6790;&#x5B8C;&#x6210;&#x4E4B;&#x524D;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5C06;&#x4E0D;&#x4F1A;&#x6E32;&#x67D3;&#x4EFB;&#x4F55;&#x5DF2;&#x5904;&#x7406;&#x7684;&#x5185;&#x5BB9;&#x3002;
        ** &#x6709;&#x65F6;&#xFF0C;&#x8FD9;&#x79CD;&#x963B;&#x585E;&#x662F;&#x5FC5;&#x987B;&#x7684;&#xFF0C;&#x56E0;&#x4E3A;&#x6211;&#x4EEC;&#x5E76;&#x4E0D;&#x5E0C;&#x671B;&#x5728;&#x6240;&#x9700;&#x7684;CSS&#x52A0;&#x8F7D;&#x4E4B;&#x524D;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5C31;&#x5F00;&#x59CB;&#x6E32;&#x67D3;&#x9875;&#x9762;&#x3002;
        *** &#x90A3;&#x4E48;&#x5C06;&#x9996;&#x5C4F;&#x5173;&#x952E;CSS&#x5185;&#x8054;&#x540E;&#xFF0C;&#x5269;&#x4F59;&#x7684;CSS&#x5185;&#x5BB9;&#x7684;&#x963B;&#x585E;&#x6E32;&#x67D3;&#x5C31;&#x4E0D;&#x662F;&#x5FC5;&#x9700;&#x7684;&#x4E86;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x5916;&#x90E8;CSS&#xFF0C;&#x5E76;&#x4E14;&#x5F02;&#x6B65;&#x52A0;&#x8F7D;

        &#x65B9;&#x5F0F;&#x4E00;&#x3001; &#x4F7F;&#x7528;JavaScript&#x52A8;&#x6001;&#x521B;&#x5EFA;&#x6837;&#x5F0F;&#x8868;link&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x63D2;&#x5165;&#x5230;DOM&#x4E2D;&#x3002;

        &#x65B9;&#x5F0F;&#x4E8C;&#x3001; &#x5C06;link&#x5143;&#x7D20;&#x7684;media&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E3A;&#x7528;&#x6237;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x5339;&#x914D;&#x7684;&#x5A92;&#x4F53;&#x7C7B;&#x578B;&#xFF08;&#x6216;&#x5A92;&#x4F53;&#x67E5;&#x8BE2;&#xFF09;&#xFF0C;&#x5982;media=&quot;print&quot;&#xFF0C;&#x751A;&#x81F3;&#x53EF;&#x4EE5;&#x662F;&#x5B8C;&#x5168;&#x4E0D;&#x5B58;&#x5728;&#x7684;&#x7C7B;&#x578B;media=&quot;noexist&quot;&#x3002;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x6765;&#x8BF4;&#xFF0C;&#x5982;&#x679C;&#x6837;&#x5F0F;&#x8868;&#x4E0D;&#x9002;&#x7528;&#x4E8E;&#x5F53;&#x524D;&#x5A92;&#x4F53;&#x7C7B;&#x578B;&#xFF0C;&#x5176;&#x4F18;&#x5148;&#x7EA7;&#x4F1A;&#x88AB;&#x653E;&#x4F4E;&#xFF0C;&#x4F1A;&#x5728;&#x4E0D;&#x963B;&#x585E;&#x9875;&#x9762;&#x6E32;&#x67D3;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x518D;&#x8FDB;&#x884C;&#x4E0B;&#x8F7D;&#x3002;


    3&#x3001;&#x6587;&#x4EF6;&#x538B;&#x7F29;
        * &#x901A;&#x8FC7;&#x76F8;&#x5173;&#x7684;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#x5BF9;css&#x6837;&#x5F0F;&#x8FDB;&#x884C;&#x6253;&#x5305;&#x538B;&#x7F29;&#xFF0C;&#x53BB;&#x9664;&#x591A;&#x4F59;&#x7684;&#x7A7A;&#x683C;&#x548C;&#x6362;&#x884C;&#x3002;&#x5982; webpack&#x3001;rollup&#x3001;grunt/gulp.js &#x7B49;    


    4&#x3001;&#x53BB;&#x9664;&#x65E0;&#x7528;CSS
        1. &#x7B5B;&#x9009;&#x53BB;&#x9664;&#x76F8;&#x5173;&#x91CD;&#x590D;&#x7684;css&#x6837;&#x5F0F;
        2. &#x53BB;&#x9664;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x65E0;&#x6CD5;&#x751F;&#x6548;&#x6216;&#x4E0D;&#x751F;&#x6548;&#x7684;css&#x6837;&#x5F0F;


&#x5EFA;&#x8BAE;&#x578B;&#x4F18;&#x5316;&#xFF1A;
    1&#x3001;&#x6709;&#x9009;&#x62E9;&#x5730;&#x4F7F;&#x7528;&#x9009;&#x62E9;&#x5668;

    2&#x3001;&#x51CF;&#x5C11;&#x4F7F;&#x7528;&#x6602;&#x8D35;&#x7684;&#x5C5E;&#x6027;
        1. &#x5728;&#x6D4F;&#x89C8;&#x5668;&#x7ED8;&#x5236;&#x5C4F;&#x5E55;&#x65F6;&#xFF0C;&#x6240;&#x6709;&#x9700;&#x8981;&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x64CD;&#x4F5C;&#x6216;&#x8BA1;&#x7B97;&#x7684;&#x5C5E;&#x6027;&#x76F8;&#x5BF9;&#x800C;&#x8A00;&#x90FD;&#x9700;&#x8981;&#x82B1;&#x8D39;&#x66F4;&#x5927;&#x7684;&#x4EE3;&#x4EF7;&#x3002;

        2. &#x5F53;&#x9875;&#x9762;&#x53D1;&#x751F;&#x91CD;&#x7ED8;&#x65F6;&#xFF0C;&#x5B83;&#x4EEC;&#x4F1A;&#x964D;&#x4F4E;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x6E32;&#x67D3;&#x6027;&#x80FD;&#x3002;&#x6240;&#x4EE5;&#x5728;&#x7F16;&#x5199;CSS&#x65F6;&#xFF0C;&#x6211;&#x4EEC;&#x5E94;&#x8BE5;&#x5C3D;&#x91CF;&#x51CF;&#x5C11;&#x4F7F;&#x7528;&#x6602;&#x8D35;&#x5C5E;&#x6027;
        * &#x6602;&#x8D35;&#x5C5E;&#x6027;&#xFF1A; &#x5982;box-shadow/border-radius/filter/&#x900F;&#x660E;&#x5EA6;/&#x4F2A;&#x7C7B;:nth-child()&#x7B49;


    3&#x3001;&#x4F18;&#x5316;&#x91CD;&#x6392;&#x4E0E;&#x91CD;&#x7ED8;
        * &#x51CF;&#x5C11;&#x91CD;&#x6392;
            1. &#x91CD;&#x6392;&#x4F1A;&#x5BFC;&#x81F4;&#x6D4F;&#x89C8;&#x5668;&#x91CD;&#x65B0;&#x8BA1;&#x7B97;&#x6574;&#x4E2A;&#x6587;&#x6863;&#xFF0C;&#x91CD;&#x65B0;&#x6784;&#x5EFA;&#x6E32;&#x67D3;&#x6811;&#xFF0C;&#x8FD9;&#x4E00;&#x8FC7;&#x7A0B;&#x4F1A;&#x964D;&#x4F4E;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x6E32;&#x67D3;&#x901F;&#x5EA6;&#x3002;&#x6709;&#x5F88;&#x591A;&#x64CD;&#x4F5C;&#x4F1A;&#x89E6;&#x53D1;&#x91CD;&#x6392;&#xFF0C;&#x6211;&#x4EEC;&#x5E94;&#x8BE5;&#x907F;&#x514D;&#x9891;&#x7E41;&#x89E6;&#x53D1;&#x8FD9;&#x4E9B;&#x64CD;&#x4F5C;&#x3002;

        ** &#x907F;&#x514D;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x91CD;&#x7ED8;
            1. &#x5F53;&#x5143;&#x7D20;&#x7684;&#x5916;&#x89C2;&#xFF08;&#x5982;color&#xFF0C;background&#xFF0C;visibility&#x7B49;&#x5C5E;&#x6027;&#xFF09;&#x53D1;&#x751F;&#x6539;&#x53D8;&#x65F6;&#xFF0C;&#x4F1A;&#x89E6;&#x53D1;&#x91CD;&#x7ED8;&#x3002;
            2. &#x5728;&#x7F51;&#x7AD9;&#x7684;&#x4F7F;&#x7528;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;&#x91CD;&#x7ED8;&#x662F;&#x65E0;&#x6CD5;&#x907F;&#x514D;&#x7684;&#x3002;&#x4E0D;&#x8FC7;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x5BF9;&#x6B64;&#x505A;&#x4E86;&#x4F18;&#x5316;&#xFF0C;&#x5B83;&#x4F1A;&#x5C06;&#x591A;&#x6B21;&#x7684;&#x91CD;&#x6392;&#x3001;&#x91CD;&#x7ED8;&#x64CD;&#x4F5C;&#x5408;&#x5E76;&#x4E3A;&#x4E00;&#x6B21;&#x6267;&#x884C;&#x3002;
            3. &#x4E0D;&#x8FC7;&#x6211;&#x4EEC;&#x4ECD;&#x9700;&#x8981;&#x907F;&#x514D;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x91CD;&#x7ED8;&#xFF0C;&#x5982;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x65F6;&#x89E6;&#x53D1;&#x7684;hover&#x4E8B;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6EDA;&#x52A8;&#x7684;&#x65F6;&#x5019;&#x7981;&#x7528;hover&#x4E8B;&#x4EF6;&#xFF0C;&#x8FD9;&#x6837;&#x9875;&#x9762;&#x5728;&#x6EDA;&#x52A8;&#x65F6;&#x4F1A;&#x66F4;&#x52A0;&#x6D41;&#x7545;&#x3002;


    4&#x3001;&#x4E0D;&#x8981;&#x4F7F;&#x7528;@import
        *** &#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;@import&#x4E3B;&#x8981;&#x6709;&#x4EE5;&#x4E0B;&#x4E24;&#x70B9;&#x539F;&#x56E0;&#x3002;

        * &#x9996;&#x5148;&#xFF0C;&#x4F7F;&#x7528;@import&#x5F15;&#x5165;CSS&#x4F1A;&#x5F71;&#x54CD;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x5E76;&#x884C;&#x4E0B;&#x8F7D;&#x3002;&#x4F7F;&#x7528;@import&#x5F15;&#x7528;&#x7684;CSS&#x6587;&#x4EF6;&#x53EA;&#x6709;&#x5728;&#x5F15;&#x7528;&#x5B83;&#x7684;&#x90A3;&#x4E2A;css&#x6587;&#x4EF6;&#x88AB;&#x4E0B;&#x8F7D;&#x3001;&#x89E3;&#x6790;&#x4E4B;&#x540E;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x624D;&#x4F1A;&#x77E5;&#x9053;&#x8FD8;&#x6709;&#x53E6;&#x5916;&#x4E00;&#x4E2A;css&#x9700;&#x8981;&#x4E0B;&#x8F7D;&#xFF0C;&#x8FD9;&#x65F6;&#x624D;&#x53BB;&#x4E0B;&#x8F7D;&#xFF0C;&#x7136;&#x540E;&#x4E0B;&#x8F7D;&#x540E;&#x5F00;&#x59CB;&#x89E3;&#x6790;&#x3001;&#x6784;&#x5EFA;render tree&#x7B49;&#x4E00;&#x7CFB;&#x5217;&#x64CD;&#x4F5C;&#x3002;&#x8FD9;&#x5C31;&#x5BFC;&#x81F4;&#x6D4F;&#x89C8;&#x5668;&#x65E0;&#x6CD5;&#x5E76;&#x884C;&#x4E0B;&#x8F7D;&#x6240;&#x9700;&#x7684;&#x6837;&#x5F0F;&#x6587;&#x4EF6;&#x3002;

        ** &#x5176;&#x6B21;&#xFF0C;&#x591A;&#x4E2A;@import&#x4F1A;&#x5BFC;&#x81F4;&#x4E0B;&#x8F7D;&#x987A;&#x5E8F;&#x7D0A;&#x4E71;&#x3002;&#x5728;IE&#x4E2D;&#xFF0C;@import&#x4F1A;&#x5F15;&#x53D1;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x4E0B;&#x8F7D;&#x987A;&#x5E8F;&#x88AB;&#x6253;&#x4E71;&#xFF0C;&#x5373;&#x6392;&#x5217;&#x5728;@import&#x540E;&#x9762;&#x7684;js&#x6587;&#x4EF6;&#x5148;&#x4E8E;@import&#x4E0B;&#x8F7D;&#xFF0C;&#x5E76;&#x4E14;&#x6253;&#x4E71;&#x751A;&#x81F3;&#x7834;&#x574F;@import&#x81EA;&#x8EAB;&#x7684;&#x5E76;&#x884C;&#x4E0B;&#x8F7D;
</code></pre>
                                    <h5
                                        id="39-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;-gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;">
                                        <a name="39-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;-gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#39-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;-gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="39-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;-gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#39-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;-gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>39. &#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x5BF9;css&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x538B;&#x7F29;&#x5408;&#x5E76;?
                                        gulp&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5982;&#x4F55;&#x538B;&#x7F29;&#x5408;&#x5E76;&#xFF1A;
    ** &#x901A;&#x8FC7;&#x76F8;&#x5173;&#x7684;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#x5BF9;css&#x6837;&#x5F0F;&#x8FDB;&#x884C;&#x6253;&#x5305;&#x538B;&#x7F29;&#xFF0C;&#x53BB;&#x9664;&#x591A;&#x4F59;&#x7684;&#x7A7A;&#x683C;&#x548C;&#x6362;&#x884C;&#x3002;&#x5982; webpack&#x3001;rollup&#x3001;grunt/gulp.js &#x7B49;

gulp &#x5982;&#x4F55;&#x5B9E;&#x73B0;css&#x538B;&#x7F29;&#x5408;&#x5E76;
    * &#x770B;&#x94FE;&#x63A5;
</code></pre>
                                    <h5
                                        id="40-&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;">
                                        <a name="40-&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#40-&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="40-&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;"
                                            class="plugin-anchor"
                                            href="#40-&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>40. &#x2605;
                                        &#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x5728;&#x540C;&#x4E00;&#x884C;&#x663E;&#x793A;?
                                    </h5>
                                    <pre><code class="lang-css">
1. &#x7ED9;<span class="hljs-selector-tag">img</span>&#x6807;&#x7B7E;&#x6DFB;&#x52A0; &#x201C;<span class="hljs-selector-tag">vertical-align</span><span class="hljs-selector-pseudo">:middle</span>&#x201D;&#x5C5E;&#x6027;

2. &#x5982;&#x679C;&#x662F;&#x80CC;&#x666F;&#x56FE;&#xFF0C;&#x5219;&#x901A;&#x8FC7;<span class="hljs-selector-tag">background</span>&#x7684; &#x5B9A;&#x4F4D;&#x5C5E;&#x6027;&#x6765;&#x8BBE;&#x7F6E;&#x4F4D;&#x7F6E;

3. &#x5206;&#x522B;&#x628A;&#x56FE;&#x7247;&#x548C;&#x6587;&#x5B57;&#x653E;&#x5165;&#x4E0D;&#x540C;&#x7684;<span class="hljs-selector-tag">div</span>&#x4E2D;&#xFF0C;&#x8BBE;&#x7F6E;&#x201C;<span class="hljs-selector-tag">vertical-align</span><span class="hljs-selector-pseudo">:middle</span>&#x201D;&#x5C5E;&#x6027;
</code></pre>
                                    <h5
                                        id="41-&#x2605;&#x2605;-a&#x6807;&#x7B7E;&#x4E2D;-active-hover-link-visited-&#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;">
                                        <a name="41-&#x2605;&#x2605;-a&#x6807;&#x7B7E;&#x4E2D;-active-hover-link-visited-&#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#41-&#x2605;&#x2605;-a&#x6807;&#x7B7E;&#x4E2D;-active-hover-link-visited-&#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="41-&#x2605;&#x2605;-a&#x6807;&#x7B7E;&#x4E2D;-active-hover-link-visited-&#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;"
                                            class="plugin-anchor"
                                            href="#41-&#x2605;&#x2605;-a&#x6807;&#x7B7E;&#x4E2D;-active-hover-link-visited-&#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>41. &#x2605;&#x2605;
                                        a&#x6807;&#x7B7E;&#x4E2D; active hover link visited
                                        &#x6B63;&#x786E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#x662F;&#x4EC0;&#x4E48;?
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">a</span> &#x6807;&#x7B7E;&#x7684;&#x8BBE;&#x7F6E;&#x987A;&#x5E8F;&#xFF1A; 
    1. <span class="hljs-selector-tag">link</span> &#xFF0C; &#x94FE;&#x63A5;&#x5E73;&#x5E38;&#x7684;&#x72B6;&#x6001;
    2. <span class="hljs-selector-tag">hover</span> &#xFF0C;&#x9F20;&#x6807;&#x653E;&#x7F6E;&#x5728;&#x94FE;&#x63A5;&#x4E0A;&#x663E;&#x793A;&#x7684;&#x6837;&#x5F0F;
    3. <span class="hljs-selector-tag">active</span> &#xFF0C;&#x94FE;&#x63A5;&#x88AB;&#x6309;&#x4E0B;&#x7684;&#x6837;&#x5F0F;
    4. <span class="hljs-selector-tag">visited</span> &#xFF0C; &#x94FE;&#x63A5;&#x88AB;&#x8BBF;&#x95EE;&#x8FC7;&#x540E;&#x7684;&#x72B6;&#x6001;
</code></pre>
                                    <h5
                                        id="42-&#x2605;&#x2605;&#x2605;-&#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;">
                                        <a name="42-&#x2605;&#x2605;&#x2605;-&#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#42-&#x2605;&#x2605;&#x2605;-&#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="42-&#x2605;&#x2605;&#x2605;-&#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#42-&#x2605;&#x2605;&#x2605;-&#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>42.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x624B;&#x673A;&#x7AEF;&#x4E0A;&#x56FE;&#x7247;&#x957F;&#x65F6;&#x95F4;&#x70B9;&#x51FB;&#x4F1A;&#x9009;&#x4E2D;&#x56FE;&#x7247;&#xFF0C;&#x5982;&#x4F55;&#x5904;&#x7406;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">img{ pointer-events:none }&#xFF0C;&#x7981;&#x6B62;&#x4E8B;&#x4EF6;&#xFF0C;&#x4F46;&#x4F1A;&#x628A;&#x6574;&#x4E2A;&#x6807;&#x7B7E;&#x7684;&#x4E8B;&#x4EF6;&#x90FD;&#x7981;&#x7528;&#x6389;&#xFF0C;&#x4E0D;&#x5EFA;&#x8BAE;&#x4F7F;&#x7528;

img{ -webkit-user-select:none }&#xFF0C;&#x7528;&#x6237;&#x9009;&#x4E2D;&#x72B6;&#x6001;

&#x63A8;&#x8350;&#xFF1A;
    img{
            -webkit-touch-callout: none; //&#x89E6;&#x6478;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
</code></pre>
                                    <h5
                                        id="43-&#x2605;-&#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;">
                                        <a name="43-&#x2605;-&#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#43-&#x2605;-&#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="43-&#x2605;-&#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;"
                                            class="plugin-anchor"
                                            href="#43-&#x2605;-&#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>43. &#x2605;
                                        &#x7B80;&#x8FF0;video&#x6807;&#x7B7E;&#x7684;&#x51E0;&#x4E2A;&#x5C5E;&#x6027;&#x548C;&#x65B9;&#x6CD5;
                                    </h5>
                                    <pre><code class="lang-css">&#x5C5E;&#x6027;&#xFF1A;
    src &#xFF1A;&#x89C6;&#x9891;&#x7684;&#x5C5E;&#x6027;
    poster&#xFF1A;&#x89C6;&#x9891;&#x5C01;&#x9762;&#xFF0C;&#x6CA1;&#x6709;&#x64AD;&#x653E;&#x65F6;&#x663E;&#x793A;&#x7684;&#x56FE;&#x7247;
    preload&#xFF1A;&#x9884;&#x52A0;&#x8F7D;
    autoplay&#xFF1A;&#x81EA;&#x52A8;&#x64AD;&#x653E;
    loop&#xFF1A;&#x5FAA;&#x73AF;&#x64AD;&#x653E;
    controls&#xFF1A;&#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x5E26;&#x7684;&#x63A7;&#x5236;&#x6761;
    width&#xFF1A;&#x89C6;&#x9891;&#x5BBD;&#x5EA6;
    height&#xFF1A;&#x89C6;&#x9891;&#x9AD8;&#x5EA6;
&#x65B9;&#x6CD5;&#xFF1A; &#x901A;&#x8FC7;video id&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x5143;&#x7D20;
    Media.paused; //&#x662F;&#x5426;&#x6682;&#x505C;

    Media.defaultPlaybackRate = value;//&#x9ED8;&#x8BA4;&#x7684;&#x56DE;&#x653E;&#x901F;&#x5EA6;&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;

    Media.playbackRate = value;//&#x5F53;&#x524D;&#x64AD;&#x653E;&#x901F;&#x5EA6;&#xFF0C;&#x8BBE;&#x7F6E;&#x540E;&#x9A6C;&#x4E0A;&#x6539;&#x53D8;

    Media.played; //&#x8FD4;&#x56DE;&#x5DF2;&#x7ECF;&#x64AD;&#x653E;&#x7684;&#x533A;&#x57DF;&#xFF0C;TimeRanges&#xFF0C;&#x5173;&#x4E8E;&#x6B64;&#x5BF9;&#x8C61;&#x89C1;&#x4E0B;&#x6587;

    Media.seekable; //&#x8FD4;&#x56DE;&#x53EF;&#x4EE5;seek&#x7684;&#x533A;&#x57DF; TimeRanges

    Media.ended; //&#x662F;&#x5426;&#x7ED3;&#x675F;

    Media.autoPlay; //&#x662F;&#x5426;&#x81EA;&#x52A8;&#x64AD;&#x653E;

    Media.loop; //&#x662F;&#x5426;&#x5FAA;&#x73AF;&#x64AD;&#x653E;

    Media.play(); //&#x64AD;&#x653E;

    Media.pause(); //&#x6682;&#x505C;
    //&#x89C6;&#x9891;&#x63A7;&#x5236;

    Media.controls;//&#x662F;&#x5426;&#x6709;&#x9ED8;&#x8BA4;&#x63A7;&#x5236;&#x6761;

    Media.volume = value; //&#x97F3;&#x91CF;

    Media.muted = value; //&#x9759;&#x97F3;
</code></pre>
                                    <h5
                                        id="44-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;">
                                        <a name="44-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#44-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="44-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#44-&#x2605;&#x2605;-&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>44. &#x2605;&#x2605;
                                        &#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;&#x51E0;&#x79CD;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5E38;&#x89C1;&#x7684;&#x89C6;&#x9891;&#x7F16;&#x7801;&#x683C;&#x5F0F;&#xFF0C;H264 , VP8&#xFF0C; AVS, RMVB&#xFF0C;WMV&#xFF0C;QuickTime&#xFF08;mov&#xFF09;

&#x89C6;&#x9891;&#x683C;&#x5F0F;&#x6709;MPEG&#x3001;AVI&#x3001;nAVI&#x3001;ASF&#x3001;MOV&#x3001;3GP&#x3001;WMV&#x3001;DivX&#x3001;XviD&#x3001;RM&#x3001;RMVB&#x3001;FLV/F4V&#x3002;
</code></pre>
                                    <h5
                                        id="45-&#x2605;&#x2605;-canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;">
                                        <a name="45-&#x2605;&#x2605;-canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#45-&#x2605;&#x2605;-canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="45-&#x2605;&#x2605;-canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#45-&#x2605;&#x2605;-canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>45. &#x2605;&#x2605;
                                        canvas&#x5728;&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x548C;&#x5728;style&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">&#x5728;<span class="hljs-selector-tag">canvas</span>&#x6807;&#x7B7E;&#x4E0A;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#xFF0C; <span class="hljs-selector-tag">canvas</span>&#x753B;&#x5E03;&#x53D1;&#x751F;&#x7684;&#x53D8;&#x5316;&#x4E0D;&#x4F1A;&#x5F71;&#x54CD;&#x5230;&#x753B;&#x5E03;&#x5185;&#x5BB9;&#xFF0C;&#x5373;&#x753B;&#x5E03;&#x5185;&#x5BB9;&#x4E0D;&#x4F1A;&#x53D1;&#x751F;&#x6539;&#x53D8;

&#x76F8;&#x53CD;&#x7684;&#xFF0C;&#x5728;<span class="hljs-selector-tag">style</span>&#x6837;&#x5F0F;&#x4E2D;&#x8BBE;&#x7F6E;&#x5BBD;&#x9AD8;&#x5219;&#x4F1A;&#x5F71;&#x54CD;&#x5230;&#x753B;&#x5E03;&#x5185;&#x5BB9;&#x7684;&#x5F62;&#x72B6;
</code></pre>
                                    <h5
                                        id="46-&#x2605;-&#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing">
                                        <a name="46-&#x2605;-&#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing"
                                            class="anchor-navigation-ex-anchor"
                                            href="#46-&#x2605;-&#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="46-&#x2605;-&#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing"
                                            class="plugin-anchor"
                                            href="#46-&#x2605;-&#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>46. &#x2605;
                                        &#x4EC0;&#x4E48;&#x662F;border-image&#xFF1F;&#x4EC0;&#x4E48;&#x662F;box-sizing?
                                    </h5>
                                    <p>border-image:<img
                                            src="C:\Users\007\AppData\Roaming\Typora\typora-user-images\1620298378082.png"
                                            alt="1620298378082"></p>
                                    <pre><code class="lang-css">border-image&#xFF1A;&#x5B57;&#x9762;&#x610F;&#x601D;&#x4E3A;&#x8FB9;&#x6846;&#x56FE;&#x7247;&#xFF0C;&#x5B83;&#x53EF;&#x4EE5;&#x8BF4;&#x662F;css3&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x91CD;&#x91CF;&#x7EA7;&#x5C5E;&#x6027;&#xFF0C;&#x5C5E;&#x4E8E;&#x8FB9;&#x6846;&#x7684;&#x4E00;&#x5458;&#xFF1B;&#x4E3B;&#x8981;&#x4F5C;&#x7528;&#x5C31;&#x662F;&#x5C06;&#x56FE;&#x7247;&#x89C4;&#x5B9A;&#x4E3A;&#x5305;&#x56F4;&#x5143;&#x7D20;&#x7684;&#x8FB9;&#x6846;
    API&#xFF1A;&#x53EF;&#x4EE5;&#x7B80;&#x5199;
        border-image-source&#xFF0C; //&#x7528;&#x5728;&#x8FB9;&#x6846;&#x7684;&#x56FE;&#x7247;&#x7684;&#x8DEF;&#x5F84;&#x3002;
        border-image-slice   // &#x56FE;&#x7247;&#x8FB9;&#x6846;&#x5411;&#x5185;&#x504F;&#x79FB;
        border-image-width   //    &#x56FE;&#x7247;&#x8FB9;&#x6846;&#x7684;&#x5BBD;&#x5EA6;
        border-image-outset   // &#x8FB9;&#x6846;&#x56FE;&#x50CF;&#x533A;&#x57DF;&#x8D85;&#x51FA;&#x8FB9;&#x6846;&#x7684;&#x91CF;&#x3002;
        border-image-repeat   //&#x56FE;&#x50CF;&#x8FB9;&#x6846;&#x662F;&#x5426;&#x5E94;&#x5E73;&#x94FA;(repeated)&#x3001;&#x94FA;&#x6EE1;(rounded)&#x6216;&#x62C9;&#x4F38;(stretched)&#x3002;

box-sizing&#xFF1A;&#x5141;&#x8BB8;&#x60A8;&#x4EE5;&#x7279;&#x5B9A;&#x7684;&#x65B9;&#x5F0F;&#x5B9A;&#x4E49;&#x5339;&#x914D;&#x67D0;&#x4E2A;&#x533A;&#x57DF;&#x7684;&#x7279;&#x5B9A;&#x5143;&#x7D20;&#x3002;

    ** &#x4F8B;&#x5982;&#xFF0C;&#x5047;&#x5982;&#x60A8;&#x9700;&#x8981;&#x5E76;&#x6392;&#x653E;&#x7F6E;&#x4E24;&#x4E2A;&#x5E26;&#x8FB9;&#x6846;&#x7684;&#x6846;&#xFF0C;&#x53EF;&#x901A;&#x8FC7;&#x5C06; box-sizing &#x8BBE;&#x7F6E;&#x4E3A; &quot;border-box&quot;&#x3002;&#x8FD9;&#x53EF;&#x4EE4;&#x6D4F;&#x89C8;&#x5668;&#x5448;&#x73B0;&#x51FA;&#x5E26;&#x6709;&#x6307;&#x5B9A;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x7684;&#x6846;&#xFF0C;&#x5E76;&#x628A;&#x8FB9;&#x6846;&#x548C;&#x5185;&#x8FB9;&#x8DDD;&#x653E;&#x5165;&#x6846;&#x4E2D;&#x3002;
</code></pre>
                                    <h5
                                        id="47-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;css3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;">
                                        <a name="47-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;css3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#47-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;css3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="47-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;css3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;"
                                            class="plugin-anchor"
                                            href="#47-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;css3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>47. &#x2605;&#x2605;
                                        &#x89E3;&#x91CA;&#x5728;ie&#x4F4E;&#x7248;&#x672C;&#x4E0B;&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;CSS3&#x7684;&#x602A;&#x5F02;&#x76D2;&#x6A21;&#x578B;&#x548C;&#x5F39;&#x6027;&#x76D2;&#x6A21;&#x578B;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="48-&#x2605;&#x2605;-animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;">
                                        <a name="48-&#x2605;&#x2605;-animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#48-&#x2605;&#x2605;-animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="48-&#x2605;&#x2605;-animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;"
                                            class="plugin-anchor"
                                            href="#48-&#x2605;&#x2605;-animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>48. &#x2605;&#x2605;
                                        animation&#x5BF9;&#x5E94;&#x7684;&#x5C5E;&#x6027;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="49-&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;">
                                        <a name="49-&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#49-&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="49-&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;"
                                            class="plugin-anchor"
                                            href="#49-&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>49.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x8BF4;&#x8BF4;&#x5BF9;transition&#x7684;&#x4E86;&#x89E3;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="50-&#x2605;&#x2605;-canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x6B63;&#x65B9;&#x5F62;">
                                        <a name="50-&#x2605;&#x2605;-canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x6B63;&#x65B9;&#x5F62;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#50-&#x2605;&#x2605;-canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x6B63;&#x65B9;&#x5F62;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="50-&#x2605;&#x2605;-canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x6B63;&#x65B9;&#x5F62;"
                                            class="plugin-anchor"
                                            href="#50-&#x2605;&#x2605;-canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;&#x6B63;&#x65B9;&#x5F62;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>50. &#x2605;&#x2605;
                                        canvas&#x5982;&#x4F55;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;&#x4E09;&#x89D2;&#x5F62;|&#x6B63;&#x65B9;&#x5F62;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="51-&#x2605;&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;">
                                        <a name="51-&#x2605;&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#51-&#x2605;&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="51-&#x2605;&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"
                                            class="plugin-anchor"
                                            href="#51-&#x2605;&#x2605;-css&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>51. &#x2605;&#x2605;
                                        CSS&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x51E0;&#x79CD;&#x65B9;&#x5F0F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="52-&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;css&#x6837;&#x5F0F;&#xFF1F;">
                                        <a name="52-&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;css&#x6837;&#x5F0F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#52-&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;css&#x6837;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="52-&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;css&#x6837;&#x5F0F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#52-&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;css&#x6837;&#x5F0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>52.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x521D;&#x59CB;&#x5316;CSS&#x6837;&#x5F0F;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="53-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x4E0B;css-sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;">
                                        <a name="53-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x4E0B;css-sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#53-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x4E0B;css-sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="53-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x4E0B;css-sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;"
                                            class="plugin-anchor"
                                            href="#53-&#x2605;&#x2605;-&#x89E3;&#x91CA;&#x4E0B;css-sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>53. &#x2605;&#x2605;
                                        &#x89E3;&#x91CA;&#x4E0B;CSS
                                        sprites&#xFF0C;&#x4EE5;&#x53CA;&#x4F60;&#x8981;&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x6216;&#x8005;&#x7F51;&#x7AD9;&#x4E2D;&#x4F7F;&#x7528;&#x5B83;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="54-&#x2605;&#x2605;-a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;">
                                        <a name="54-&#x2605;&#x2605;-a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#54-&#x2605;&#x2605;-a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="54-&#x2605;&#x2605;-a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;"
                                            class="plugin-anchor"
                                            href="#54-&#x2605;&#x2605;-a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>54. &#x2605;&#x2605;
                                        a&#x70B9;&#x51FB;&#x51FA;&#x73B0;&#x6846;&#xFF0C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="55-&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;doctype-html&#xFF0C;html5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;">
                                        <a name="55-&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;doctype-html&#xFF0C;html5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#55-&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;doctype-html&#xFF0C;html5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="55-&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;doctype-html&#xFF0C;html5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#55-&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;doctype-html&#xFF0C;html5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>55. &#x2605;&#x2605;
                                        &#x5982;&#x679C;&#x6211;&#x4E0D;&#x8F93;&#x5165;&lt;!DOCTYPE
                                        HTML&gt;&#xFF0C;HTML5&#x80FD;&#x5DE5;&#x4F5C;&#x5417;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="56-&#x2605;&#x2605;-&#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;html5&#xFF1F;">
                                        <a name="56-&#x2605;&#x2605;-&#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;html5&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#56-&#x2605;&#x2605;-&#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;html5&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="56-&#x2605;&#x2605;-&#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;html5&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#56-&#x2605;&#x2605;-&#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;html5&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>56. &#x2605;&#x2605;
                                        &#x54EA;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;&#x652F;&#x6301;HTML5&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="57-&#x2605;&#x2605;&#x2605;-css3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="57-&#x2605;&#x2605;&#x2605;-css3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#57-&#x2605;&#x2605;&#x2605;-css3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="57-&#x2605;&#x2605;&#x2605;-css3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#57-&#x2605;&#x2605;&#x2605;-css3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>57.
                                        &#x2605;&#x2605;&#x2605;
                                        CSS3&#x4E2D;&#x7684;&#x9009;&#x62E9;&#x5668;&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="58-&#x2605;&#x2605;-css3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="58-&#x2605;&#x2605;-css3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#58-&#x2605;&#x2605;-css3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="58-&#x2605;&#x2605;-css3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#58-&#x2605;&#x2605;-css3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>58. &#x2605;&#x2605;
                                        CSS3&#x4E2D;&#x591A;&#x5217;&#x5E03;&#x5C40;&#x7684;&#x7528;&#x5904;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="59-&#x2605;&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;">
                                        <a name="59-&#x2605;&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#59-&#x2605;&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="59-&#x2605;&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#59-&#x2605;&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>59.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x672C;&#x5730;&#x5B58;&#x50A8;&#x6709;&#x751F;&#x547D;&#x5468;&#x671F;&#x5417;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="60-&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="60-&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#60-&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="60-&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#60-&#x2605;&#x2605;-&#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>60. &#x2605;&#x2605;
                                        &#x672C;&#x5730;&#x5B58;&#x50A8;&#x548C;Cookies&#x4E4B;&#x95F4;&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="61-&#x2605;&#x2605;-websql&#x662F;&#x4EC0;&#x4E48;&#xFF1F;websql&#x662F;html5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;">
                                        <a name="61-&#x2605;&#x2605;-websql&#x662F;&#x4EC0;&#x4E48;&#xFF1F;websql&#x662F;html5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#61-&#x2605;&#x2605;-websql&#x662F;&#x4EC0;&#x4E48;&#xFF1F;websql&#x662F;html5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="61-&#x2605;&#x2605;-websql&#x662F;&#x4EC0;&#x4E48;&#xFF1F;websql&#x662F;html5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#61-&#x2605;&#x2605;-websql&#x662F;&#x4EC0;&#x4E48;&#xFF1F;websql&#x662F;html5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>61. &#x2605;&#x2605;
                                        WebSQL&#x662F;&#x4EC0;&#x4E48;&#xFF1F;WebSQL&#x662F;HTML5&#x89C4;&#x8303;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x5417;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="62-&#x2605;-xhtml&#x4E0E;html&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;">
                                        <a name="62-&#x2605;-xhtml&#x4E0E;html&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#62-&#x2605;-xhtml&#x4E0E;html&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="62-&#x2605;-xhtml&#x4E0E;html&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#62-&#x2605;-xhtml&#x4E0E;html&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>62. &#x2605;
                                        XHTML&#x4E0E;HTML&#x7684;&#x6709;&#x4F55;&#x5F02;&#x540C;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="63-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;css&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="63-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;css&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#63-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;css&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="63-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;css&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#63-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;css&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>63. &#x2605;&#x2605;
                                        &#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;CSS&#x7684;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF1F;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="64-&#x2605;&#x2605;-doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;">
                                        <a name="64-&#x2605;&#x2605;-doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#64-&#x2605;&#x2605;-doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="64-&#x2605;&#x2605;-doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#64-&#x2605;&#x2605;-doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>64. &#x2605;&#x2605;
                                        Doctype&#x7684;&#x4F5C;&#x7528;&#xFF1F;&#x6807;&#x51C6;&#x6A21;&#x5F0F;&#x4E0E;&#x517C;&#x5BB9;&#x6A21;&#x5F0F;&#x5404;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="65-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;">
                                        <a name="65-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#65-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="65-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#65-&#x2605;&#x2605;-&#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>65. &#x2605;&#x2605;
                                        &#x4ECB;&#x7ECD;&#x4E00;&#x4E0B;&#x4F60;&#x5BF9;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x7684;&#x7406;&#x89E3;&#xFF1F;&#x5E38;&#x89C1;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="66-&#x2605;&#x2605;-&#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;-&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;-&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;">
                                        <a name="66-&#x2605;&#x2605;-&#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;-&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;-&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#66-&#x2605;&#x2605;-&#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;-&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;-&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="66-&#x2605;&#x2605;-&#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;-&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;-&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#66-&#x2605;&#x2605;-&#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;-&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;-&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>66. &#x2605;&#x2605;
                                        &#x524D;&#x7AEF;&#x9875;&#x9762;&#x6709;&#x54EA;&#x4E09;&#x5C42;&#x6784;&#x6210;&#xFF1F;
                                        &#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                        &#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="67-&#x2605;&#x2605;&#x2605;-css&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;">
                                        <a name="67-&#x2605;&#x2605;&#x2605;-css&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#67-&#x2605;&#x2605;&#x2605;-css&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="67-&#x2605;&#x2605;&#x2605;-css&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#67-&#x2605;&#x2605;&#x2605;-css&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>67.
                                        &#x2605;&#x2605;&#x2605;
                                        CSS&#x9009;&#x62E9;&#x7B26;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;&#x4F18;&#x5148;&#x7EA7;&#x7B97;&#x6CD5;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5 id="68-&#x2605;&#x2605;&#x2605;-iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;">
                                        <a name="68-&#x2605;&#x2605;&#x2605;-iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#68-&#x2605;&#x2605;&#x2605;-iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="68-&#x2605;&#x2605;&#x2605;-iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#68-&#x2605;&#x2605;&#x2605;-iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>68.
                                        &#x2605;&#x2605;&#x2605; iframe&#x7684;&#x4F18;&#x7F3A;&#x70B9;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="69-&#x2605;&#x2605;&#x2605;&#x2605;-&#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;">
                                        <a name="69-&#x2605;&#x2605;&#x2605;&#x2605;-&#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#69-&#x2605;&#x2605;&#x2605;&#x2605;-&#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="69-&#x2605;&#x2605;&#x2605;&#x2605;-&#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;"
                                            class="plugin-anchor"
                                            href="#69-&#x2605;&#x2605;&#x2605;&#x2605;-&#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>69.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x91CD;&#x6392;&#xFF08;reflow&#xFF09;&#x4E0E;&#x91CD;&#x7ED8;&#xFF08;repaint&#xFF09;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="70-&#x2605;&#x2605;-&#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;">
                                        <a name="70-&#x2605;&#x2605;-&#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#70-&#x2605;&#x2605;-&#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="70-&#x2605;&#x2605;-&#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;"
                                            class="plugin-anchor"
                                            href="#70-&#x2605;&#x2605;-&#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>70. &#x2605;&#x2605;
                                        &#x624B;&#x5199;&#x5B9E;&#x73B0;&#x4E00;&#x4E2A;&#x9EBB;&#x5C06;&#x4E09;&#x6876;&#x7684;&#x5E03;&#x5C40;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="71-&#x2605;&#x2605;&#x2605;&#x2605;-bfc-&#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;">
                                        <a name="71-&#x2605;&#x2605;&#x2605;&#x2605;-bfc-&#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#71-&#x2605;&#x2605;&#x2605;&#x2605;-bfc-&#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="71-&#x2605;&#x2605;&#x2605;&#x2605;-bfc-&#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;"
                                            class="plugin-anchor"
                                            href="#71-&#x2605;&#x2605;&#x2605;&#x2605;-bfc-&#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>71.
                                        &#x2605;&#x2605;&#x2605;&#x2605; BFC &#x662F;&#x4EC0;&#x4E48;&#x4E1C;&#x897F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="72-&#x2605;&#x2605;&#x2605;&#x2605;-flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;">
                                        <a name="72-&#x2605;&#x2605;&#x2605;&#x2605;-flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#72-&#x2605;&#x2605;&#x2605;&#x2605;-flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="72-&#x2605;&#x2605;&#x2605;&#x2605;-flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;"
                                            class="plugin-anchor"
                                            href="#72-&#x2605;&#x2605;&#x2605;&#x2605;-flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>72.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        flex&#x5E03;&#x5C40;&#x6709;&#x54EA;&#x4E9B;&#x5C5E;&#x6027;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="73-&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;">
                                        <a name="73-&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#73-&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="73-&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#73-&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>73. &#x2605;&#x2605;
                                        &#x5217;&#x4E3E;&#x4F60;&#x6240;&#x77E5;&#x9053;&#x7684;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x3002;&#x4F2A;&#x7C7B;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5 id="74-&#x2605;&#x2605;-rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;"><a
                                            name="74-&#x2605;&#x2605;-rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#74-&#x2605;&#x2605;-rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="74-&#x2605;&#x2605;-rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;"
                                            class="plugin-anchor"
                                            href="#74-&#x2605;&#x2605;-rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>74. &#x2605;&#x2605;
                                        rem&#x5E03;&#x5C40;&#x7684;&#x672C;&#x8D28;&#x3002;</h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="75-&#x2605;-divcss&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;">
                                        <a name="75-&#x2605;-divcss&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#75-&#x2605;-divcss&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="75-&#x2605;-divcss&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#75-&#x2605;-divcss&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>75. &#x2605;
                                        div+css&#x7684;&#x5E03;&#x5C40;&#x6BD4;&#x8F83;table&#x5E03;&#x5C40;&#x6709;&#x4EC0;&#x4E48;&#x6709;&#x70B9;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="76-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;">
                                        <a name="76-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#76-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="76-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;"
                                            class="plugin-anchor"
                                            href="#76-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>76.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x5355;&#x884C;&#x6216;&#x8005;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x5C55;&#x793A;&#x7701;&#x7565;&#x53F7;&#x7684;&#x5B9E;&#x73B0;&#x65B9;&#x6CD5;&#x3002;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="77-&#x2605;-displaynone&#x548C;visbilityhidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;">
                                        <a name="77-&#x2605;-displaynone&#x548C;visbilityhidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#77-&#x2605;-displaynone&#x548C;visbilityhidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="77-&#x2605;-displaynone&#x548C;visbilityhidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#77-&#x2605;-displaynone&#x548C;visbilityhidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>77. &#x2605;
                                        display:none&#x548C;visbility:hidden&#x7684;&#x533A;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x554A;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="78-&#x2605;&#x2605;-&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;">
                                        <a name="78-&#x2605;&#x2605;-&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#78-&#x2605;&#x2605;-&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="78-&#x2605;&#x2605;-&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#78-&#x2605;&#x2605;-&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>78. &#x2605;&#x2605;
                                        &#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x5F15;&#x8D77;&#x7684;&#x95EE;&#x9898;&#x548C;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="79-&#x2605;&#x2605;-&#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;">
                                        <a name="79-&#x2605;&#x2605;-&#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#79-&#x2605;&#x2605;-&#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="79-&#x2605;&#x2605;-&#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#79-&#x2605;&#x2605;-&#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>79. &#x2605;&#x2605;
                                        &#x53EF;&#x4EE5;&#x6709;&#x54EA;&#x4E9B;&#x65B9;&#x6CD5;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <h5
                                        id="80-&#x2605;&#x2605;-pointer-events-none-&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;">
                                        <a name="80-&#x2605;&#x2605;-pointer-events-none-&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#80-&#x2605;&#x2605;-pointer-events-none-&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="80-&#x2605;&#x2605;-pointer-events-none-&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#80-&#x2605;&#x2605;-pointer-events-none-&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>80. &#x2605;&#x2605;
                                        <code>pointer-events: none</code>
                                        &#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">

</code></pre>
                                    <p><code>pointer-events: none;</code>
                                        &#x8868;&#x793A;&#x5143;&#x7D20;&#x4E0D;&#x4F1A;&#x5BF9;
                                        <code>mouse/touch</code>
                                        &#x76F8;&#x5173;&#x4E8B;&#x4EF6;&#x4F5C;&#x51FA;&#x54CD;&#x5E94;&#x3002;
                                    </p>
                                    <blockquote>
                                        <p>&#x8BE6;&#x7EC6;&#x53C2;&#x8003;&#xFF1A;<a
                                                href="https://segmentfault.com/a/1190000023070286"
                                                target="_blank">https://segmentfault.com/a/1190000023070286</a></p>
                                    </blockquote>
                                    <h5
                                        id="81-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;">
                                        <a name="81-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#81-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="81-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#81-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>81.
                                        &#x2605;&#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x79FB;&#x52A8;&#x7AEF;&#x901A;&#x7528;&#x7684;1px&#x8FB9;&#x6846;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;
                                    </h5>
                                    <p><strong>&#x4E00;&#x3001;&#x4EA7;&#x751F;&#x539F;&#x56E0;&#xFF1A;</strong></p>
                                    <p>&#x4E3A;&#x4EC0;&#x4E48;&#x4F1A;&#x4EA7;&#x751F;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#x5462;&#xFF1F;&#x4E3B;&#x8981;&#x662F;&#x8DDF;&#x4E00;&#x4E2A;&#x4E1C;&#x897F;&#x6709;&#x5173;&#xFF0C;DPR(devicePixelRatio)
                                        &#x8BBE;&#x5907;&#x50CF;&#x7D20;&#x6BD4;&#xFF0C;&#x5B83;&#x662F;&#x9ED8;&#x8BA4;&#x7F29;&#x653E;&#x4E3A;100%&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBE;&#x5907;&#x50CF;&#x7D20;&#x548C;CSS&#x50CF;&#x7D20;&#x7684;&#x6BD4;&#x503C;&#x3002;
                                    </p>
                                    <pre><code class="lang-txt">window.devicePixelRatio = &#x7269;&#x7406;&#x50CF;&#x7D20; /CSS&#x50CF;&#x7D20;
</code></pre>
                                    <p>&#x76EE;&#x524D;&#x4E3B;&#x6D41;&#x7684;&#x5C4F;&#x5E55;DPR=2 &#xFF08;iPhone
                                        8&#xFF09;, &#x6216;&#x8005;3&#xFF08;iPhone 8
                                        Plus&#xFF09;&#x3002;&#x62FF;2&#x500D;&#x5C4F;&#x6765;&#x8BF4;&#xFF0C;&#x8BBE;&#x5907;&#x7684;&#x7269;&#x7406;&#x50CF;&#x7D20;&#x8981;&#x5B9E;&#x73B0;1&#x50CF;&#x7D20;&#xFF0C;&#x800C;DPR=2&#xFF0C;&#x6240;&#x4EE5;css
                                        &#x50CF;&#x7D20;&#x53EA;&#x80FD;&#x662F;
                                        0.5&#x3002;&#x4E00;&#x822C;&#x8BBE;&#x8BA1;&#x7A3F;&#x662F;&#x6309;&#x7167;750&#x6765;&#x8BBE;&#x8BA1;&#x7684;&#xFF0C;&#x5B83;&#x4E0A;&#x9762;&#x7684;1px&#x662F;&#x4EE5;750&#x6765;&#x53C2;&#x7167;&#x7684;&#xFF0C;&#x800C;&#x6211;&#x4EEC;&#x5199;css&#x6837;&#x5F0F;&#x662F;&#x4EE5;&#x8BBE;&#x5907;375&#x4E3A;&#x53C2;&#x7167;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x5E94;&#x8BE5;&#x5199;&#x7684;0.5px&#x5C31;&#x597D;&#x4E86;&#x554A;&#xFF01;
                                        &#x8BD5;&#x8FC7;&#x4E86;&#x5C31;&#x77E5;&#x9053;&#xFF0C;iOS
                                        8+&#x7CFB;&#x7EDF;&#x652F;&#x6301;&#xFF0C;&#x5B89;&#x5353;&#x7CFB;&#x7EDF;&#x4E0D;&#x652F;&#x6301;&#x3002;
                                    </p>
                                    <p><strong>&#x4E8C;&#x3001;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF1A;</strong></p>
                                    <ul>
                                        <li>WWDC&#x5BF9;iOS&#x7EDF;&#x7ED9;&#x51FA;&#x7684;&#x65B9;&#x6848;</li>
                                        <li>&#x4F7F;&#x7528;&#x8FB9;&#x6846;&#x56FE;&#x7247;</li>
                                        <li>&#x4F7F;&#x7528;box-shadow&#x5B9E;&#x73B0;</li>
                                        <li>&#x4F7F;&#x7528;&#x4F2A;&#x5143;&#x7D20;&#xFF08;&#x63A8;&#x8350;&#xFF09;
                                        </li>
                                        <li>&#x8BBE;&#x7F6E;viewport&#x7684;scale&#x503C;</li>
                                    </ul>
                                    <p><strong>&#x4E09;&#x3001;&#x4F7F;&#x7528;&#x4F2A;&#x5143;&#x7D20;&#x65B9;&#x6848;&#x4EE3;&#x7801;&#xFF1A;</strong>
                                    </p>
                                    <p>1&#x3001;stylus</p>
                                    <pre><code class="lang-css">.border
  width 1rem
  height 1rem
  margin .2rem
  position relative
  &amp;::after
    content &apos;&apos;
    position absolute
    z-index 999
    left 0
    right 0
    bottom 0
    top 0
    border solid 1px #f00
    @media (-webkit-max-device-pixel-ratio: 1.49)
      transform scale(1)
      width 100%
      height 100%

    @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49)
      transform scale(0.5)
      width 200%
      height 200%

    @media (-webkit-min-device-pixel-ratio: 2.5)
      transform scale(0.3333333)
      width 300%
      height 300%

    transform-origin 0 0
</code></pre>
                                    <p>2&#x3001;sass</p>
                                    <pre><code class="lang-css">@mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null) {
    // &#x4E3A;&#x8FB9;&#x6846;&#x4F4D;&#x7F6E;&#x63D0;&#x4F9B;&#x5B9A;&#x4F4D;&#x53C2;&#x8003;
    position: relative;
    @if $border-width == null {
        $border-width: 0;
    }
    border-radius: $radius;
    &amp;::after {
        // &#x7528;&#x4EE5;&#x89E3;&#x51B3;&#x8FB9;&#x6846;layer&#x906E;&#x76D6;&#x5185;&#x5BB9;
        pointer-events: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        // fix&#x5F53;&#x5143;&#x7D20;&#x5BBD;&#x5EA6;&#x51FA;&#x73B0;&#x5C0F;&#x6570;&#x65F6;&#xFF0C;&#x8FB9;&#x6846;&#x53EF;&#x80FD;&#x663E;&#x793A;&#x4E0D;&#x5168;&#x7684;&#x95EE;&#x9898;
        // overflow: hidden;
        content: &quot;\0020&quot;;
        border-color: $border-color;
        border-style: $border-style;
        border-width: $border-width;
        // &#x9002;&#x914D;dpr&#x8FDB;&#x884C;&#x7F29;&#x653E;
        @media (-webkit-max-device-pixel-ratio: 1.49) {
            width: 100%;
            height: 100%;
            @if $radius != null {
                border-radius: $radius;
            }
        }
        @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
            width: 200%;
            height: 200%;
            transform: scale(.5);
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        (-webkit-min-device-pixel-ratio: 2.5) {
            width: 300%;
            height: 300%;
            transform: scale(.3333333);
            @if $radius != null {
                border-radius: $radius * 3;
            }
        }
        @include transform-origin(0 0);
    }
}
</code></pre>
                                    <blockquote>
                                        <p>&#x8BE6;&#x7EC6;&#x53C2;&#x8003;&#xFF1A;<a
                                                href="https://juejin.cn/post/6844903877947424782"
                                                target="_blank">https://juejin.cn/post/6844903877947424782</a></p>
                                    </blockquote>
                                    <h5
                                        id="82-&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5E94;&#x7528;css&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;dpr&#xFF1F;">
                                        <a name="82-&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5E94;&#x7528;css&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;dpr&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#82-&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5E94;&#x7528;css&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;dpr&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="82-&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5E94;&#x7528;css&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;dpr&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#82-&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5E94;&#x7528;css&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;dpr&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>82.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x5E94;&#x7528;CSS&#x83B7;&#x5F97;&#x5F53;&#x524D;&#x8BBE;&#x5907;&#x7684;DPR&#xFF1F;
                                    </h5>
                                    <h5
                                        id="83-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;-iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;">
                                        <a name="83-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;-iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#83-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;-iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="83-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;-iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#83-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;-iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>83.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x5728;&#x9875;&#x9762;&#x4E0A;&#x6DFB;&#x52A0;
                                        iconfont&#xFF1F;&#x5728;&#x6837;&#x5F0F;&#x5982;&#x4F55;&#x6DFB;&#x52A0;&#x5B57;&#x4F53;&#x6587;&#x672C;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">::before</span>
  <span class="hljs-selector-tag">height</span> 1<span class="hljs-selector-tag">rem</span>
  <span class="hljs-selector-tag">content</span>: &quot;\<span class="hljs-selector-tag">e60d</span>&quot;
</code></pre>
                                    <h5
                                        id="84-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;">
                                        <a name="84-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#84-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="84-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#84-&#x2605;&#x2605;-&#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>84. &#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x8BBE;&#x7F6E;10px&#x7684;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">b</span>
  <span class="hljs-selector-tag">font-size</span> <span class="hljs-selector-class">.12rem</span>
  <span class="hljs-selector-tag">font-weight</span> 400
  <span class="hljs-selector-tag">transform</span> <span class="hljs-selector-tag">scale</span>(0<span class="hljs-selector-class">.8</span>)
</code></pre>
                                    <h5
                                        id="85-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;">
                                        <a name="85-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#85-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="85-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#85-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>85.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x591A;&#x884C;&#x6587;&#x672C;&#x6EA2;&#x51FA;&#x9690;&#x85CF;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css">  ellipsis($width = 0, $line-clamp = 1)
  width $width
  display -webkit-box
  -webkit-line-clamp $line-clamp
  -webkit-box-orient vertical
  overflow hidden
</code></pre>
                                    <h5
                                        id="86-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;">
                                        <a name="86-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#86-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="86-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#86-&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>86.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x6A2A;&#x5411;&#x5BB9;&#x5668;&#x81EA;&#x52A8;&#x4F38;&#x5C55;&#xFF1F;
                                    </h5>
                                    <pre><code class="lang-css"><span class="hljs-selector-tag">width</span> <span class="hljs-selector-tag">max-content</span>
</code></pre>
                                    <h5
                                        id="87-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-nexttick-&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;">
                                        <a name="87-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-nexttick-&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#87-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-nexttick-&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="87-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-nexttick-&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#87-&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-nexttick-&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>87.
                                        &#x2605;&#x2605;&#x2605;&#x2605;&#x2605; $nextTick
                                        &#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#xFF1F;
                                    </h5>
                                    <ul>
                                        <li>Better-Scroll</li>
                                    </ul>
                                    <h5
                                        id="88-&#x2605;&#x2605;&#x2605;-better-scroll-&#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;">
                                        <a name="88-&#x2605;&#x2605;&#x2605;-better-scroll-&#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#88-&#x2605;&#x2605;&#x2605;-better-scroll-&#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="88-&#x2605;&#x2605;&#x2605;-better-scroll-&#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#88-&#x2605;&#x2605;&#x2605;-better-scroll-&#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>88.
                                        &#x2605;&#x2605;&#x2605; Better-Scroll &#x6EDA;&#x52A8;&#x6761;&#x4EF6;&#xFF1F;
                                    </h5>
                                    <ul>
                                        <li>&#x5BB9;&#x5668;&#x7684;&#x9AD8;&#x5EA6;&#xFF08;&#x5BBD;&#x5EA6;&#xFF09;&#x8981;&#x5C0F;&#x4E8E;&#x5185;&#x5BB9;&#x7684;&#x9AD8;&#x5EA6;&#xFF08;&#x5BBD;&#x5EA6;&#xFF09;
                                        </li>
                                        <li>&#x5BB9;&#x5668;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x8981;&#x552F;&#x4E00;
                                        </li>
                                        <li>new
                                            BScroll()&#x65F6;&#x5019;&#xFF0C;&#x8981;&#x6709;&#x5185;&#x5BB9;&#xFF0C;&#x5982;&#x5728;Vue&#x4E2D;&#xFF0C;&#x4F7F;&#x7528;$nextTick()
                                        </li>
                                    </ul>
                                    <h5
                                        id="89-&#x2605;&#x2605;&#x2605;&#x2605;-positionsticky-&#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;">
                                        <a name="89-&#x2605;&#x2605;&#x2605;&#x2605;-positionsticky-&#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#89-&#x2605;&#x2605;&#x2605;&#x2605;-positionsticky-&#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="89-&#x2605;&#x2605;&#x2605;&#x2605;-positionsticky-&#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#89-&#x2605;&#x2605;&#x2605;&#x2605;-positionsticky-&#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>89.
                                        &#x2605;&#x2605;&#x2605;&#x2605; position:sticky
                                        &#x7528;&#x8FC7;&#x6CA1;&#xFF0C;&#x6709;&#x5565;&#x6548;&#x679C;&#xFF1F;
                                    </h5>
                                    <p><a href="https://www.cnblogs.com/coco1s/p/6402723.html"
                                            target="_blank">&#x4F7F;&#x7528; position:sticky
                                            &#x5B9E;&#x73B0;&#x7C98;&#x6027;&#x5E03;&#x5C40;</a></p>
                                    <h5
                                        id="90-&#x2605;&#x2605;&#x2605;&#x2605;-flex1-&#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;">
                                        <a name="90-&#x2605;&#x2605;&#x2605;&#x2605;-flex1-&#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#90-&#x2605;&#x2605;&#x2605;&#x2605;-flex1-&#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="90-&#x2605;&#x2605;&#x2605;&#x2605;-flex1-&#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#90-&#x2605;&#x2605;&#x2605;&#x2605;-flex1-&#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>90.
                                        &#x2605;&#x2605;&#x2605;&#x2605; flex:1
                                        &#x7684;&#x5B8C;&#x6574;&#x5199;&#x6CD5;&#x662F;&#xFF1F;&#x5206;&#x522B;&#x662F;&#x4EC0;&#x4E48;&#x610F;&#x601D;&#xFF1F;
                                    </h5>
                                    <p><a href="https://zhuanlan.zhihu.com/p/136223806" target="_blank">flex:1
                                            &#x5230;&#x5E95;&#x4EE3;&#x8868;&#x4EC0;&#x4E48;?</a></p>
                                    <h5
                                        id="91-&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;gpu&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;">
                                        <a name="91-&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;gpu&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#91-&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;gpu&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="91-&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;gpu&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#91-&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;gpu&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;gpu&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>91.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x8BF4;&#x8BF4;&#x4F60;&#x5BF9;GPU&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x4E3E;&#x4F8B;&#x8BF4;&#x660E;&#x54EA;&#x4E9B;&#x5143;&#x7D20;&#x80FD;&#x89E6;&#x53D1;GPU&#x786C;&#x4EF6;&#x52A0;&#x901F;&#xFF1F;
                                    </h5>
                                    <ul>
                                        <li>
                                            <p>GPU:
                                                &#x56FE;&#x5F62;&#x5904;&#x7406;&#x5668;,&#x7528;&#x4E8E;&#x5904;&#x7406;&#x56FE;&#x5F62;&#x6709;&#x5173;&#x7684;&#x4EFB;&#x52A1;,&#x7528;&#x4E8E;&#x6E32;&#x67D3;&#x9875;&#x9762;
                                            </p>
                                        </li>
                                        <li>
                                            <p>&#x5728;css&#x4E2D;&#x4F7F;&#x7528; transform: translateZ(0), opacity,
                                                filter
                                                &#x53EF;&#x4EE5;&#x5F00;&#x542F;GPU&#x786C;&#x4EF6;&#x52A0;&#x901F;&#x3002;
                                            </p>
                                        </li>
                                    </ul>
                                    <h5
                                        id="92-&#x2605;&#x2605;&#x2605;&#x2605;-&#x7EAF;-css-&#x65B9;&#x5F0F;&#x5B9E;&#x73B0;-css-&#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;">
                                        <a name="92-&#x2605;&#x2605;&#x2605;&#x2605;-&#x7EAF;-css-&#x65B9;&#x5F0F;&#x5B9E;&#x73B0;-css-&#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#92-&#x2605;&#x2605;&#x2605;&#x2605;-&#x7EAF;-css-&#x65B9;&#x5F0F;&#x5B9E;&#x73B0;-css-&#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="92-&#x2605;&#x2605;&#x2605;&#x2605;-&#x7EAF;-css-&#x65B9;&#x5F0F;&#x5B9E;&#x73B0;-css-&#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;"
                                            class="plugin-anchor"
                                            href="#92-&#x2605;&#x2605;&#x2605;&#x2605;-&#x7EAF;-css-&#x65B9;&#x5F0F;&#x5B9E;&#x73B0;-css-&#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>92.
                                        &#x2605;&#x2605;&#x2605;&#x2605; &#x7EAF; CSS &#x65B9;&#x5F0F;&#x5B9E;&#x73B0;
                                        CSS &#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;
                                    </h5>
                                    <p><a href="https://www.cnblogs.com/libin-1/p/6645569.html" target="_blank">&#x7EAF;
                                            CSS &#x65B9;&#x5F0F;&#x5B9E;&#x73B0; CSS
                                            &#x52A8;&#x753B;&#x7684;&#x6682;&#x505C;&#x4E0E;&#x64AD;&#x653E;</a></p>
                                    <h5
                                        id="93-&#x2605;&#x2605;&#x2605;&#x2605;-&#x4F7F;&#x7528;css3&#x52A8;&#x753B;&#x4EE3;&#x66FF;js&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;">
                                        <a name="93-&#x2605;&#x2605;&#x2605;&#x2605;-&#x4F7F;&#x7528;css3&#x52A8;&#x753B;&#x4EE3;&#x66FF;js&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#93-&#x2605;&#x2605;&#x2605;&#x2605;-&#x4F7F;&#x7528;css3&#x52A8;&#x753B;&#x4EE3;&#x66FF;js&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="93-&#x2605;&#x2605;&#x2605;&#x2605;-&#x4F7F;&#x7528;css3&#x52A8;&#x753B;&#x4EE3;&#x66FF;js&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;"
                                            class="plugin-anchor"
                                            href="#93-&#x2605;&#x2605;&#x2605;&#x2605;-&#x4F7F;&#x7528;css3&#x52A8;&#x753B;&#x4EE3;&#x66FF;js&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>93.
                                        &#x2605;&#x2605;&#x2605;&#x2605;
                                        &#x4F7F;&#x7528;CSS3&#x52A8;&#x753B;&#x4EE3;&#x66FF;JS&#x52A8;&#x753B;&#x7684;&#x597D;&#x5904;
                                    </h5>
                                    <p><a href="https://www.cnblogs.com/xiaonian8/p/13834656.html"
                                            target="_blank">&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;css&#x52A8;&#x753B;&#x66FF;&#x6362;js&#x52A8;&#x753B;?</a>
                                    </p>
                                    <h5
                                        id="94-&#x2605;&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;sass&#xFF0C;less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;">
                                        <a name="94-&#x2605;&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;sass&#xFF0C;less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;"
                                            class="anchor-navigation-ex-anchor"
                                            href="#94-&#x2605;&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;sass&#xFF0C;less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a><a
                                            name="94-&#x2605;&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;sass&#xFF0C;less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;"
                                            class="plugin-anchor"
                                            href="#94-&#x2605;&#x2605;&#x2605;-&#x7B80;&#x8FF0;&#x4E00;&#x4E0B;sass&#xFF0C;less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;"><i
                                                class="fa fa-link" aria-hidden="true"></i></a>94.
                                        &#x2605;&#x2605;&#x2605;
                                        &#x7B80;&#x8FF0;&#x4E00;&#x4E0B;Sass&#xFF0C;Less&#xFF0C;&#x8BF7;&#x8BF4;&#x660E;&#x533A;&#x522B;&#xFF1F;
                                    </h5>
                                    <p><a href="https://www.cnblogs.com/pink-chen/p/10727915.html"
                                            target="_blank">Sass&#x548C;Less&#x7684;&#x6BD4;&#x8F83;</a></p>


                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class='search-results-count'></span> results
                                        matching "<span class='search-query'></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">No results matching "<span
                                            class='search-query'></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>



            <a href="../" class="navigation navigation-prev " aria-label="Previous page: 前言">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="../javascript/" class="navigation navigation-next " aria-label="Next page: JavaScript">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>

        <script>
            var gitbook = gitbook || [];
            gitbook.push(function () {
                gitbook.page.hasChanged({ "page": { "title": "HTML5+CSS3", "level": "1.2", "depth": 1, "next": { "title": "JavaScript", "level": "1.3", "depth": 1, "path": "javascript/index.md", "ref": "./javascript/index.md", "articles": [] }, "previous": { "title": "前言", "level": "1.1", "depth": 1, "path": "README.md", "ref": "README.md", "articles": [] }, "dir": "ltr" }, "config": { "plugins": ["-sharing", "splitter", "expandable-chapters-small", "anchors", "github", "github-buttons", "sharing-plus", "anchor-navigation-ex", "favicon", "insert-logo"], "styles": { "website": "./styles/website.css" }, "pluginsConfig": { "github": { "url": "https://github.com/lurongtao/felixbooks-interview" }, "splitter": {}, "search": {}, "sharing-plus": { "qq": false, "all": ["facebook", "google", "twitter", "instapaper", "linkedin", "pocket", "stumbleupon"], "douban": false, "facebook": true, "weibo": false, "instapaper": false, "whatsapp": false, "hatenaBookmark": false, "twitter": true, "messenger": false, "line": false, "vk": false, "pocket": true, "google": false, "viber": false, "stumbleupon": false, "qzone": false, "linkedin": false }, "lunr": { "maxIndexSize": 1000000, "ignoreSpecialCharacters": false }, "fontsettings": { "theme": "white", "family": "sans", "size": 2 }, "highlight": {}, "anchor-navigation-ex": { "associatedWithSummary": true, "float": { "floatIcon": "fa fa-navicon", "level1Icon": "", "level2Icon": "", "level3Icon": "", "showLevelIcon": false }, "mode": "float", "multipleH1": true, "pageTop": { "level1Icon": "", "level2Icon": "", "level3Icon": "", "showLevelIcon": false }, "printLog": false, "showGoTop": true, "showLevel": false }, "favicon": { "shortcut": "./source/images/favicon.jpg", "bookmark": "./source/images/favicon.jpg", "appleTouch": "./source/images/apple-touch-icon.jpg", "appleTouchMore": { "120x120": "./source/images/apple-touch-icon.jpg", "180x180": "./source/images/apple-touch-icon.jpg" } }, "github-buttons": { "buttons": [{ "user": "lurongtao", "repo": "felixbooks-interview", "type": "star", "size": "small", "count": true }] }, "expandable-chapters-small": {}, "sharing": { "qq": false, "all": ["google", "facebook", "weibo", "twitter", "qq", "qzone", "linkedin", "pocket"], "douban": false, "facebook": false, "weibo": false, "instapaper": false, "whatsapp": false, "hatenaBookmark": false, "twitter": false, "messenger": false, "line": false, "vk": false, "pocket": false, "google": false, "viber": false, "stumbleupon": false, "qzone": false, "linkedin": false }, "theme-default": { "styles": { "website": "styles/website.css", "pdf": "styles/pdf.css", "epub": "styles/epub.css", "mobi": "styles/mobi.css", "ebook": "styles/ebook.css", "print": "styles/print.css" }, "showLevel": false }, "anchors": {}, "insert-logo": { "url": "/felixbooks-interview2/images/logo-interview.png", "style": "background: skyblue; width: 100%; height: 100%;" } }, "theme": "default", "author": "码路", "pdf": { "pageNumbers": true, "fontSize": 12, "fontFamily": "Arial", "paperSize": "a4", "chapterMark": "pagebreak", "pageBreaksBefore": "/", "margin": { "right": 62, "left": 62, "top": 56, "bottom": 56 } }, "structure": { "langs": "LANGS.md", "readme": "README.md", "glossary": "GLOSSARY.md", "summary": "SUMMARY.md" }, "variables": {}, "title": "码路大前端小册-企业面试真题", "language": "zh-hans", "links": {}, "gitbook": "3.2.3", "description": "Electron 入门与实战" }, "file": { "path": "HTML+CSS/index.md", "mtime": "2023-05-06T23:22:47.645Z", "type": "markdown" }, "gitbook": { "version": "3.2.3", "time": "2023-05-06T23:31:20.692Z" }, "basePath": "..", "book": { "language": "" } });
            });
        </script>
    </div>


    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>


    <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>



    <script src="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.js"></script>



    <script src="../gitbook/gitbook-plugin-github/plugin.js"></script>



    <script src="../gitbook/gitbook-plugin-github-buttons/plugin.js"></script>



    <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>



    <script src="../gitbook/gitbook-plugin-insert-logo/plugin.js"></script>



    <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>



    <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>



</body>

</html>